여러 상위 요소에 걸쳐 중첩된 n번째 하위 요소 스타일 지정

다양한 상위 구조 내에서 특정 중첩 요소의 스타일을 지정하는 솔루션을 찾으려면 다음 마크업을 고려하세요. :

• one
• two

• three

• four

목표는 첫 번째 자식인지 여부에 관계없이 "one"과 " three"에 스타일을 적용하는 것입니다. 각

.

:nth-child()

사용 시도 제한 :nth-child()는 동일한 부모를 공유하는 요소에만 적용되기 때문에 부족합니다. 이 시나리오에서 CSS 선택기 .foo li:nth-child(1), .foo li:nth-child(3)는 각

의 첫 번째 하위 항목만 대상으로 합니다.

대안 솔루션

JavaScript:

jQuery와 같은 라이브러리를 사용하면 다음을 선택할 수 있습니다. JavaScript의 강력한 필터링 기능을 사용하는 요소입니다. 예를 들어, 다음 스크립트는 .foo 컨테이너 내의 첫 번째 및 세 번째

• 요소를 대상으로 합니다:

  $('.foo li:eq(0), .foo li:eq(2)')

  명시적 요소 표시:

  원하는 요소를 클래스 또는 ID로 명시적으로 표시하여 활성화할 수 있습니다. CSS를 통한 선택. 예를 들어, 첫 번째와 세 번째

• 요소에 클래스를 추가합니다:

• one
• two

그런 다음 CSS를 사용하여 표시된 요소를 타겟팅할 수 있습니다.

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