Question

If I have something like this

<h3><a href="#">Pay Info</a></h3>
    <div id="pay-Wrapper" >
       ...content
    </div>
<h3><a href="#">Car Info</a></h3>
    <div id="car-Wrapper" >
       ...content
    </div>
<h3><a href="#">Loan Info</a></h3>
    <div id="loan-Wrapper" >
       ...content
    </div>

How can I reference in css the div after each h3 so I can set a style that I want to apply to all first div after any h3 in my page?

here’s what I tied, no luck though:

h3 div 
{
    height:100px; 
    overflow-x:hidden; 
    overflow-y:auto; 
    position:relative; 
    left:0; 
    top: 0; 
}

Answer 1

How can I reference in CSS the div after each h3 so I can set a style that I want to apply to all first div after any h3 in my page?

Use this adjacent sibling selector…

h3 + div {
    /* ... */
}