Select first class which after a specific class - html

Question

In the following markup, I want to apply css to only div with class .box which comes immediately after the .wrap. If it comes after the <p> or any other class than the .wrap, I do not want to select it.
<div class="wrap">
<div class="box">Apply style to this box</div>
<p>random</p>
<div class="box">Do not apply style to this box</div>
</div>
I have tried to look the adjacent sibling selector, but does not seem to work in this case.
.wrap + .box{
background: red;
}
JSFiddle: http://jsfiddle.net/8fjuz7sm/
I cannot use :first-child as it can occur only once too.

Answer 1

Write:
.wrap .box:first-of-type{
background:red;
}
DEMO here.
OR
.wrap .box:nth-of-type(1){
background:red;
}
DEMO here.

Answer 2

as #Hiral says, you'll have to either use first-of-type or nth-of-type(1).
If you cannot do this, but have access to the html, you'll have to add another class to the elements you wish to apply the class on, such as
<div class="wrap">
<div class="box red">Apply style to this box</div>
<p>random</p>
<div class="box">Do not apply style to this box</div>
</div>
or you can use javascript and/or jquery to select the first element then apply styling via javascript.
Jquery Example
$(".wrap .box").eq(0).css("Background-color","red")

Answer 3

I edited your JSFIDDLE : http://jsfiddle.net/8fjuz7sm/4/
I recommend using jQuery for this because older browsers may not support the pure css solution :
create a new class :
.wrapperbox {
background: red;
}
Then add this jQuery code to your script :
$( ".wrap > .box:first" ).addClass( "wrapperbox" );
After this every html element with the class wrap which has a child box will get a class wrapperbox and there you can do your css
When you dont want to do jQuery you can use this :
.wrap .box:first-of-type{
background:red;
}
It will select the first child of wrap with the class name box and then do your css