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

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

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

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

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

Т.е.

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

Ответы

Ответ 1

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

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

Сделайте трюк!

Ответ 2

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

Похоже, вы можете искать селектор css3 first-of-type

Ответ 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 +.

Ответ 4

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

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

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

Не перегружайте вещи;)

Ответ 5

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