여러 부모에 걸쳐 특정 n번째 자식 스타일 지정

n번째 자식 선택기를 사용하여 중첩된 요소의 스타일을 지정할 때 선택기가 단일 상위 컨텍스트 내에서 작동합니다. 이로 인해 여러 상위 요소에 걸쳐 특정 하위 요소를 타겟팅할 때 문제가 발생할 수 있습니다.

문제:

다음 마크업을 고려하세요.

    
one
        
two
    
three
    
four
    

목표는 .foo 내의 첫 번째 및 세 번째 li 요소의 스타일을 지정하는 것입니다. 다음 CSS를 사용합니다:

.foo li:nth-child(1),
.foo li:nth-child(3)
{
    color: red;
}

nth-child가 각 ul의 첫 번째와 세 번째 하위를 선택하기 때문에 이 접근 방식은 작동하지 않습니다.

해결책:

CSS 사용 단독으로는 여러 부모의 n번째 자녀를 타겟팅하는 것이 불가능합니다. 그러나 대체 솔루션도 있습니다:

• JavaScript: jQuery와 같은 라이브러리를 사용하면 DOM 요소를 쉽게 조작하고 $('.foo li:eq( 0), .foo li:eq(2)').
• 명시적 마크업: 첫 번째 항목에 클래스 또는 ID를 추가합니다. 세 번째 li 요소는 명시적으로 다음과 같습니다:

    
one
        
two
    
three
    
four
    

그런 다음 새로 추가된 클래스를 사용하여 스타일을 지정합니다.

.foo li.first,
.foo li.third
{
    color: red;
}