CSS: первый ребенок для работы с классами
Скажи, у меня есть эта разметка:
<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;
}
5 ответов
Я считаю, что вы ищете что-то вроде этого:
.current:nth-child(1){
background:red;
}
Должен сделать свое дело!
:first-child
целевые элементы, которые являются первыми дочерними элементами, а не первыми вхождениями данного класса. Так что это будет нацелено на все элементы с current
класс, это первые дети. Это могут быть все они, если они находятся в разных местах на странице или вообще отсутствуют.
Похоже, вы ищете селектор CSS3 first-of-type
Как упомянуто в этих двух ответах (наряду с этим новым), 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+.
Если они распространены по всей странице, вы не можете получить то, что вам нужно, с чистым решением CSS. Даже с first-of-type
если элементы не находятся на одном уровне DOM. Проверьте пример, чтобы увидеть, что вы не можете выбрать элементы.
С другой стороны, как только я перемещаю третий ток на тот же уровень DOM, где у меня уже есть второй, я выбираю только второй выбранный элемент, так как это первый ток на этом уровне.
С другой стороны, это очень короткий однострочный текст в JS
Не переусердствуйте;)
Если он распространяется по всей странице, вы не можете настроить таргетинг на него с помощью css.