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

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

Answer 3

Попробуйте это

.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' имеет только красный цвет.