Выбор первого вхождения класса в родительском элементе

В CSS проблема возникает, когда вам нужно выбрать первый элемент конкретный класс внутри родительского элемента, особенно если класс может появляться в разных позициях среди своих однородных элементов. Эта проблема становится еще более сложной, когда класс или дочерняя структура родительского элемента могут отличаться.

Псевдокласс :first-of-type

CSS3 предлагает :first Псевдокласс -of-type, который позволяет вам выбрать первый элемент определенного типа среди его братьев и сестер. Однако не существует эквивалентного псевдокласса :first-of-class специально для выбора первого элемента данного класса.

Обходное решение с использованием ~ и общего селектора одного уровня

Одним из обходных путей является использование общего комбинатора одного уровня (~) вместе с переопределяющим правилом. Зная стили по умолчанию, применяемые к другим элементам того же класса, вы можете создать более конкретное правило, которое переопределяет стили по умолчанию только для элементов, следующих за первым вхождением целевого класса.

Пример :

.parentClass > * > .targetClass {
    /* Apply styles to all .targetClass elements within .parentClass */
}

.parentClass > * > .targetClass ~ .targetClass {
    /* Apply overriding styles only to .targetClass elements that follow */
}

Иллюстрация:

Рассмотрим следующую структуру HTML:

    
...
    
First target
    
Second target
    
Third target

В этом сценарии первое правило будет применять стили ко всем элементам с классом «targetClass» внутри элемента «parentClass». Второе правило переопределяет эти стили для всех элементов «targetClass», следующих за первым, возвращая все пользовательские стили, примененные первым правилом.

Совместимость браузера:

Общий комбинатор одного уровня (~) распознается IE7 и более поздними версиями. Таким образом, этот обходной путь совместим со всеми основными браузерами, кроме IE6.