이것은 저자들이 어떻게 :first-child작동 하는지 오해하는 가장 잘 알려진 예 중 하나입니다 . CSS2에 도입 의 :first-child의사 클래스를 대표하는 부모의 최초의 아이를 . 그게 다야. 나머지 복합 선택기에서 지정한 조건과 가장 먼저 일치하는 하위 요소를 선택한다는 잘못된 오해가 있습니다. 선택기가 작동하는 방식 ( 설명 은 여기 를 참조 하십시오) 으로 인해 이는 사실이 아닙니다.
선택기 레벨 3은 :first-of-type의사 클래스를 도입하여 요소 유형의 형제 중 첫 번째 요소를 나타냅니다. 이 답변은 그림의 차이로 설명 :first-child하고 :first-of-type. 그러나와 마찬가지로 :first-child다른 조건이나 특성을 보지 않습니다. HTML에서 요소 유형은 태그 이름으로 표시됩니다. 질문에서 해당 유형은 p입니다.
불행히도, :first-of-class주어진 클래스의 첫 번째 자식 요소와 일치하는 유사 의사 클래스 는 없습니다 . Lea Verou 와 내가 이것에 대해 생각해 낸 한 가지 해결 방법은 (전적으로 독립적이지만) 먼저 해당 클래스의 모든 요소에 원하는 스타일을 적용하는 것 입니다.
/*
* Select all .red children of .home, including the first one,
* and give them a border.
*/
.home > .red {
border: 1px solid red;
}
... 우선 규칙에서 일반 형제 결합 자를 사용하여 첫 번째 클래스 다음에 오는 클래스의 요소 스타일을 "실행 취소"합니다 .~
/*
* Select all but the first .red child of .home,
* and remove the border from the previous rule.
*/
.home > .red ~ .red {
border: none;
}
이제 첫 번째 요소에만 class="red"테두리가 있습니다.
규칙이 적용되는 방법은 다음과 같습니다.
<div class="home">
<span>blah</span> <!-- [1] -->
<p class="red">first</p> <!-- [2] -->
<p class="red">second</p> <!-- [3] -->
<p class="red">third</p> <!-- [3] -->
<p class="red">fourth</p> <!-- [3] -->
</div>
적용되는 규칙이 없습니다. 테두리가 렌더링되지 않습니다.
이 요소에는 클래스 red가 없으므로 건너 뜁니다.
첫 번째 규칙 만 적용됩니다. 빨간색 테두리가 렌더링됩니다.
이 요소에는 클래스 red가 있지만 그 앞에는 클래스가있는 요소가 없습니다 red. 따라서 두 번째 규칙은 적용되지 않고 첫 번째 규칙 만 적용되며 요소는 경계를 유지합니다.
두 규칙이 모두 적용됩니다. 테두리가 렌더링되지 않습니다.
이 요소에는 클래스가 red있습니다. 또한 클래스와 함께 하나 이상의 다른 요소가 앞에옵니다 red. 따라서 두 규칙이 모두 적용되고 두 번째 border선언은 첫 번째 규칙을 무시 하므로 규칙 을 "실행 취소"합니다.
이 선택기 3 년에 도입되었지만 달리 보너스로, 일반 형제 연결자, 꽤 IE7에서 잘 지원 및 최신 버전 인 :first-of-type및 :nth-of-type()단지 이후 IE9에서 지원하는. 좋은 브라우저 지원이 필요하다면 운이 좋을 것입니다.
사실, 형제 콤비는이 기술의 유일한 중요한 구성 요소입니다, 사실 과 , 그와 같은 놀라운 브라우저 지원이 매우 다양한이 기술을 만드는 - 당신은 클래스 선택기 외에 다른 것들에 의해 요소를 필터링을 적용 할 수 있습니다 :
:first-of-type클래스 선택기 대신 유형 선택기를 제공하여 IE7 및 IE8 에서이 문제를 해결할 수 있습니다 (다시 말해서 여기에서 잘못된 사용법에 대한 자세한 내용 참조).
article > p {
/* Apply styles to article > p:first-of-type, which may or may not be :first-child */
}
article > p ~ p {
/* Undo the above styles for every subsequent article > p */
}
속성 선택기 또는 클래스 대신 다른 간단한 선택기로 필터링 할 수 있습니다 .
의사 요소가 기술적으로 단순한 선택기는 아니지만 이 재정의 기술을 의사 요소 와 결합 할 수도 있습니다 .
이것이 작동하려면 다른 형제 요소에 대한 기본 스타일이 무엇인지 미리 알아야하므로 첫 번째 규칙을 무시할 수 있습니다. 또한 여기에는 CSS의 규칙을 재정의하는 것이 포함되므로 Selectors API 또는 Selenium 의 CSS 로케이터 와 함께 사용하기 위해 단일 선택기로 동일한 작업을 수행 할 수 없습니다 .
Selectors 4 는 :nth-child()표기법에 대한 확장 (원래 완전히 새로운 의사 클래스 :nth-match()) :nth-child(1 of .red)을 도입하여 가상 대신에 무언가를 사용할 수 있음을 언급 할 가치가 있습니다 .red:first-of-class. 비교적 최근의 제안으로 인해 프로덕션 사이트에서 아직 사용할 수있을 정도로 상호 운용 가능한 구현이 충분하지 않습니다. 잘만되면 이것이 곧 바뀔 것이다. 그 동안 제안한 해결 방법은 대부분의 경우 효과적입니다.
이 답변은 질문이 주어진 클래스를 가진 모든 첫 번째 자식 요소를 찾고 있다고 가정합니다. 전체 문서 에서 복잡한 선택기의 n 번째 일치에 대한 의사 클래스 또는 일반 CSS 솔루션이 없습니다 . 솔루션의 존재 여부는 문서 구조에 따라 크게 다릅니다. jQuery를이 제공 :eq(), :first, :last이 목적을 위해 더, 그러나 다시 노트는 것을 그들은 매우 다르게에서 기능 :nth-child()등 . Selectors API를 사용하면 document.querySelector()첫 번째 일치 항목을 얻는 데 사용할 수 있습니다 .
var first = document.querySelector('.home > .red');
또는 document.querySelectorAll()인덱서와 함께 사용 하여 특정 일치 항목을 선택하십시오.
var redElements = document.querySelectorAll('.home > .red');
var first = redElements[0];
var second = redElements[1];
// etc
필립 Daubmeier.red:nth-of-type(1) 가 원래 받아 들인 대답 의 해결책 (원래 Martyn이 작성 했지만 이후 삭제됨)은 예상대로 작동하지 않습니다.
예를 들어, p원래 마크 업 에서만을 선택하려는 경우 :
<p class="red"></p>
<div class="red"></div>
... 추가 사용할 수 없다 .red:first-of-type(등가 .red:nth-of-type(1)각 요소는 (그 유형의 최초로 유일한 하나이므로) p와 div되도록 각각) 모두 선택자와 일치한다.
특정 클래스의 첫 번째 요소가 유형 의 첫 번째 요소 인 경우 의사 클래스도 작동하지만 우연의 일치로만 발생합니다 . 이 동작은 Philip의 답변에서 설명합니다. 이 요소 앞에 동일한 유형의 요소를 넣으면 선택기가 실패합니다. 업데이트 된 마크 업 작성 :
<div class="home">
<span>blah</span>
<p class="red">first</p>
<p class="red">second</p>
<p class="red">third</p>
<p class="red">fourth</p>
</div>
규칙을 적용 .red:first-of-type하면 효과가 있지만 p수업이 없으면 다른 규칙 을 추가하면 다음과 같습니다.
<div class="home">
<span>blah</span>
<p>dummy</p>
<p class="red">first</p>
<p class="red">second</p>
<p class="red">third</p>
<p class="red">fourth</p>
</div>
... 첫 번째 .red요소가 이제 두 번째 요소 이므로 선택기가 즉시 실패 p합니다.