Select nth-child across multiple parents

Question

I have the following markup:

<div class="foo">
    <ul>
        <li>one</li>
        <li>two</li>
    </ul>
    <ul>
        <li>three</li>
    </ul>
    <ul>
        <li>four</li>
    </ul>
</div>

I wish to style "one" and "three".

However, the markup could also be:

<div class="foo">
    <ul>
        <li>one</li>
        <li>two</li>
        <li>three</li>
    </ul>
    <ul>
        <li>four</li>
    </ul>
</div>

I've tried using the following CSS:

.foo li:nth-child(1),
.foo li:nth-child(3)
{
    color:red;
}

However, as expected, this is styling the first child of each ul. (Demo: http://jsfiddle.net/hTfVu/)

How can I change my CSS so that I can target the 1st and 3rd li belonging to .foo?

Answer 1

You can't do that with CSS selectors alone. :nth-child() and sibling combinators are limited to children/siblings sharing the same parent only, as implied by their names, and CSS selectors cannot account for such variations in parent-child structure, nor is there anything like an :nth-grandchild() selector (even :nth-match() from Selectors 4 limits itself to elements sharing the same parent only).

Of course with something like jQuery it becomes trivial: $('.foo li:eq(0), .foo li:eq(2)') Otherwise you'll have to mark the first and third li elements explicitly using classes or IDs, and then select them.

Answer 2

You could use the even and odd selectors.

li:nth-child(odd) {
  color: red;
}
li:nth-child(even) {
  color: white;
}