CSS: первый ребенок для работы с классами

Question

Скажи, у меня есть эта разметка:

<div class='current'>
</div>
<div class='current'>
</div>
<div class='current'>
</div>
<div class='current'>
</div>
<div class='current'>
</div>

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

Могу ли я нацелиться только на первое вхождение класса "current", используя только CSS, в идеале я бы хотел избежать использования javascript (пока)?

То есть.

.current:first-child {
background: red;
}

Answer 1

Я считаю, что вы ищете что-то вроде этого:

.current:nth-child(1){
    background:red;
}

Должен сделать свое дело!

Answer 2

:first-child целевые элементы, которые являются первыми дочерними элементами, а не первыми вхождениями данного класса. Так что это будет нацелено на все элементы с current класс, это первые дети. Это могут быть все они, если они находятся в разных местах на странице или вообще отсутствуют.

Похоже, вы ищете селектор CSS3 first-of-type

Answer 3

Как упомянуто в этих двух ответах (наряду с этим новым), CSS3 не выпекается в псевдоклассе, который выбирает первый элемент своего класса (в отличие от :first-of-type который выбирает по типу).

Вы всегда можете использовать :first-child если .current гарантированно будет первым ребенком .group:

.group .current:first-child {
    background: red;
}

Но если это не гарантировано, то, основываясь на ваших комментариях и ссылке на ответ, поскольку они все имеют одного и того же родителя, вы можете сделать это вместо этого:

.group .current {
    background: red;
}

.group .current ~ .current {
    background: transparent; /* Or whatever your default is */
}

Общий братский комбинатор ~ игнорирует другие элементы, которые не могут быть .current, Все эти правила работают в IE7+.

Answer 4

Если они распространены по всей странице, вы не можете получить то, что вам нужно, с чистым решением CSS. Даже с first-of-type если элементы не находятся на одном уровне DOM. Проверьте пример, чтобы увидеть, что вы не можете выбрать элементы.

С другой стороны, как только я перемещаю третий ток на тот же уровень DOM, где у меня уже есть второй, я выбираю только второй выбранный элемент, так как это первый ток на этом уровне.

С другой стороны, это очень короткий однострочный текст в JS

Не переусердствуйте;)

Answer 5

Если он распространяется по всей странице, вы не можете настроить таргетинг на него с помощью css.