селектор CSS для определенного положения соответствующих классов

Question

я следующие дивы:

<div class="c"> 
    <div class="a"></div> 
    <div class="a"></div> 
    <div class="a"></div>//this 
</div> 
<div class="c"> 
    <div class="a"></div>//this 
    <div class="a"></div>//this 
    <div class="a"></div> 
</div> 
<div class="c"> 
    <div class="a"></div> 
    <div class="a"></div> 
    <div class="a"></div> 
</div> 

Есть ли селектор CSS, который позволяет мне выбрать .a элементы, расположенные в 3-й, 4-й и 5-е место в .a соответствие результатов ?

Нечто похожее на eq() в jQuery.

: nth-child() здесь не помогает, так как это просто упрощенный случай.

This is a fiddle с результатами использования jQuery. Я хочу знать, есть ли решение, использующее только CSS.

Answer 1

Нет, нет эквивалента jQuery's :eq() в CSS. На простом английском языке нет селектора для n-го элемента, соответствующего сложному селектору (в вашем примере 3-й, 4-й и 5-й элементы соответствуют селектору .a).

Просто для полноты картины (потому что кто-то собирается сказать "well, actually..."), специфические элементы, конечно, достижимых с

.c:nth-child(1) > .a:nth-child(3), .c:nth-child(2) > .a:nth-child(1), .c:nth-child(2) > .a:nth-child(2) 

Но это предполагает, что это точно как выглядит разметка, что редко бывает реалистичным предположением, особенно если страница динамически генерируется.

В очень редких случаях, когда разметка является статической, и вы можете полагаться на 3-й, 4-й и 5-й .a элементов, находящихся в этих точных положениях, все средствами использовать селектор выше. Но если их позиции или структура могут быть разными, вам понадобятся другие способы их идентификации в CSS, например, с дополнительным именем класса.

Answer 2

.c:nth-child(1) .a:nth-child(3) { background:yellow; } 
 
.c:nth-child(2) .a:nth-child(2), .c:nth-child(2) .a:nth-child(1) { background:yellow; }

<div class="c"> 
 
    <div class="a">c1-a1</div> 
 
    <div class="a">c1-a2</div> 
 
    <div class="a">c1-a3 //this</div> 
 
</div> 
 
<div class="c"> 
 
    <div class="a">c2-a1 //this</div> 
 
    <div class="a">c2-a2 //this</div> 
 
    <div class="a">c2-a3</div> 
 
</div> 
 
<div class="c"> 
 
    <div class="a">c3-a1</div> 
 
    <div class="a">c3-a2</div> 
 
    <div class="a">c3-a3</div> 
 
</div>