의사 클래스 nth-of-type

의사 클래스 nth-of-type는 지정된 유형의 n번째 자손인 요소를 선택합니다.

즉, 제가 h2:nth-of-type(4)라고 작성하면 부모 내에서 4번째 h2를 찾습니다(부모 내에서 4번째 요소인 h2만 찾는 nth-child와는 다릅니다).

구문

css선택자:nth-of-type(숫자 | odd | even | 표현식){

}

값

값	설명
숫자	`1`부터 시작하는 양수입니다. 접근하려는 요소의 번호를 지정합니다. 요소 번호 매기기는 `1`부터 시작합니다.
`odd`	홀수 번째 요소들입니다.
`even`	짝수 번째 요소들입니다.
표현식	문자 n을 사용하여 특별한 표현식을 구성할 수 있으며, 여기서 n은 0(1이 아닌)부터 무한대까지의 모든 정수를 의미합니다. 따라서 `2n`는 모든 짝수 번호를 의미합니다(두 번째부터 시작). 이것을 어떻게 이해할까요? `n`에 `0`부터 순차적으로 숫자를 대입합니다: n = 0이면 2n은 0이 됩니다 - 해당 요소는 없습니다(요소 번호 매기기는 1부터 시작합니다). n = 1이면 2n은 2가 되어 두 번째 요소, n = 2이면 2n은 4가 되어 네 번째 요소입니다. 3n이라고 작성하면 세 번째부터 시작하는 매 세 번째 요소가 됩니다.

예제

부모 내에서 2번째 h2인 h2를 찾아봅시다:

html<div>
  <h2>제목</h2>
  <p>단락</p>
  
  <h2>제목</h2>
  <p>단락</p>
  
  <h2>제목</h2>
  <p>단락</p>
</div>

cssh2:nth-of-type(2) {
  color: red;
}

Результат:

예제

모든 짝수 번째 h2를 찾아봅시다:

html<div>
  <h2>제목</h2>
  <p>단락</p>
  
  <h2>제목</h2>
  <p>단락</p>
  
  <h2>제목</h2>
  <p>단락</p>
  
  <h2>제목</h2>
  <p>단락</p>
  
  <h2>제목</h2>
  <p>단락</p>
</div>

cssh2:nth-of-type(even) {
  color: red;
}

Результат:

예제

모든 홀수 번째 h2를 찾아봅시다:

html<div>
  <h2>제목</h2>
  <p>단락</p>
  
  <h2>제목</h2>
  <p>단락</p>
  
  <h2>제목</h2>
  <p>단락</p>
  
  <h2>제목</h2>
  <p>단락</p>
  
  <h2>제목</h2>
  <p>단락</p>
</div>

cssh2:nth-of-type(odd) {
  color: red;
}

Результат: