Ich habe folgenden Aufschlag:

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

Ich möchte "eins" und "drei" stylen.

Das Markup könnte jedoch auch sein:

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

Ich habe versucht, das folgende CSS zu verwenden:

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

Dies ist jedoch wie erwartet das erste Kind von jedemul. (Demo:http://jsfiddle.net/hTfVu/)

Wie kann ich mein CSS so ändern, dass ich das erste und dritte Targeting durchführen kann?li zugehörig.foo?