상위 클래스 내에서 클래스의 첫 번째 발생 선택

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

이 시나리오에서 첫 번째 규칙은 "parentClass" 요소 내에 "targetClass" 클래스가 있는 모든 요소에 스타일을 적용합니다. 두 번째 규칙은 첫 번째 규칙을 따르는 모든 "targetClass" 요소에 대한 스타일을 재정의하여 첫 번째 규칙에 의해 적용된 모든 사용자 정의 스타일을 되돌립니다.

브라우저 호환성:

일반 형제 조합자(~)는 IE7 이상에서 인식됩니다. 따라서 이 해결 방법은 IE6을 제외한 모든 주요 브라우저와 호환됩니다.