Question

Ok, I’m stuck trying to solve this one with CSS only although I’m not entirely sure if it’s possible, so before I resort to JavaScript I need to ask here.

I need to target a sibling with the class column-title of the first <li> in the following list:

<ul>
    <li class="column-title">Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li class="column-title">Item 4</li>
    <li>Item 5</li>
</ul>

Consider that the sibling can be in any position, for example:

(5th spot)

<ul>
    <li class="column-title">Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>
    <li class="column-title">Item 5</li>
</ul>

(3rd spot)

<ul>
    <li class="column-title">Item 1</li>
    <li>Item 2</li>
    <li class="column-title">Item 3</li>
    <li>Item 4</li>
    <li>Item 5</li>
</ul>

I don’t think this is possible with CSS only, right?

Thanks.

EDIT–

Oh boy, I found the solution:

Use the sibling combinator: ~

.column-title ~ .column-title { background:#ddd; }

This way the property will be applied to ANY sibling of the first .column-title li.

PS. I found the answer at the same time crowjonah was posting his. I chose his answer as the selected answer anyway.

Answer 1

You can try the semi-supported “general sibling combinator”, ~. Something like:

li.column-title ~ li.column-title {color: red;}

Here’s a basic fiddle showing it being done.

And then you might need a shim like this for IE7 support, if that’s up your alley.

Seeing your update, you should know that for best results, if you are excluding the first instance of li.column-title from your siblings rule, you should specify :first-child:

ul li.column-title:first-child {color: blue;}
ul li.column-title:first-child ~ li.column-title {color: red;}​