CSS выбрать первый элемент с определенным классом

Question

Каков синтаксис для выбора первого элемента с определенным классом? Пожалуйста, укажите, является ли этот метод выбора частью CSS3 или CSS2.1.

Answer 1

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

.myclass {
    /* styles of the first one */
}

.myclass ~ .myclass {
    /* styles of the others (must cancel the styles of the first rule) */
}

Не пытайтесь использовать .myclass:not(.myclass ~ .myclass) чтобы сделать это только в одном правиле, это не будет работать, так как :not() принимает только простые селекторы в скобках.

Если вы хотите первый .myclass во всем документе нет способа сделать это только с помощью CSS.

:nth-of-type() или же :nth-child() опубликованные подходы неверны, даже если они случайно совпадают с элементами, которые вы хотите видеть на своей странице.

Браузерная поддержка селектора братьев (~): IE7+ и всех остальных.

Answer 2

Эта проблема так же ужасна, как и ее решения. ИМО, вы должны просто дать первому элементу класс .first{} программно.

Answer 3

.class-name:first-of-type {
  ⋮ declarations
}

Answer 4

Попробуй это

.testparent .test:first-child {
    color: red;
}

<div class="testparent">
<div class="test">test</div>
<div class="test">test</div>
<div class="test">test</div>
</div>

первый div 'test' имеет только красный цвет.