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

Ответ 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 + и всех других.

Ответ 2

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

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

Ответ 3

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