Sibling selector in css

Question

I need to apply css to siblings elements

Example

<div>
    <div class="e"></div>
    <div class="f"></div>
</div>

I want them E and F to be red color, but only if they are siblings.

In case like

<div>
    <div class="e"></div>
</div>
<div>
    <div class="f"></div>
</div>

they are not siblings, so they will have different colors.

No js.

Answer 1

Use the sibling selector:

.e ~ div {
    background-color:red;
}

This targets all the <div> siblings of .e

jsFiddle here

Answer 2

Well, this one is a bit crazy, but works as long as you only have two:

.f:nth-child(2), .e:nth-last-child(2) {
   background-color: #ff0000;
}

See fiddle: http://jsfiddle.net/wvLaB/