Question

I am wondering if there is a way to apply a CSS style to an element only if a certain element comes before it. For example, apply my style only if .foo appears immediately before .bar:

<div class="foo"></div>
<div class="bar"></div> //apply style

<div class="dur"></div>
<div class="bar"></div> //do not apply style

<div class="bar"></div> //do not apply style

Answer 1

Yes, with CSS3 you can do

.foo + .bar {

}

to target a .bar which is immediately after a .foo.

See w3.org reference for variants (for example after but not necessarely immediately after).

Note that you can’t use this on IE7 and it doesn’t work perfectly on IE8.