Выберите nth-child для нескольких родителей

У меня есть следующая разметка: 

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

Я хочу, чтобы стиль "один "и"три".

Однако разметка также может быть: 

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

Я пробовал использовать следующий CSS: 

.foo li:nth-child(1),
.foo li:nth-child(3)
{
    color:red;
}
Однако, как и ожидалось, это первый ребенок каждого ul. (демо: http://jsfiddle.net/hTfVu/)

Как я могу изменить свой CSS, чтобы я мог нацелиться на 1 - й и 3-й li, принадлежащие .foo?

2 7
css css-selectors parent-child

2 ответа:

Вы не можете сделать это только с помощью CSS-селекторов. :nth-child() и родственные комбинаторы ограничены детьми / братьями, имеющими только одного родителя, что подразумевается их именами, и селекторы CSS не могут учитывать такие вариации в структуре родитель-потомок, и нет ничего похожего на селектор :nth-grandchild() (даже :nth-match() из селекторов 4 ограничивается элементами, имеющими только один родительский элемент).

Конечно, с чем-то вроде jQuery это становится тривиальным: $('.foo li:eq(0), .foo li:eq(2)') в противном случае вам придется отметить первый и третий элементы li явно используют классы или идентификаторы, а затем выделяют их.

13

Вы можете использовать четные и нечетные селекторы.

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