CSS :nth-of-type() 패턴

정의와 사용법

CSS :nth-of-type(n) seudo 클래스는 그의 부모 요소에서 동일한 타입(태그 이름)의 n 자식 요소의 각 요소.

n 는 숫자/인덱스, 키워드(奇수 또는 짝수) 또는 공식(예: an + b)

푸시:보기 :nth-child() seudo 클래스는 그의 부모 요소에서 n 자식 요소의 요소, 어떤 타입이든 상관없이.

예제

예제 1

사용 방법 :nth-of-type() 선택자:

/* div 형제 요소의 두 번째 요소를 선택합니다 */
div:nth-of-type(2) {
  background: red;
}
/* 목록의 두 번째 li 요소를 선택합니다 */
li:nth-of-type(2) {
  background: lightgreen;
}
/* 형제 요소 그룹의 모든 세 번째 요소를 선택합니다 */
:nth-of-type(3) {
  background: yellow;
}

직접 시도해 보세요

예제 2

奇수 과 짝수 는 키워드로 사용할 수 있으며, 첫 번째 자식 요소의 인덱스가 1인 모든 인덱스가 짝수 또는奇수인 자식 요소를 매칭할 수 있습니다.

여기서, 우리는奇수 인덱스와 짝수 인덱스의 <p> 요소에 다른 배경색을 지정합니다:

p:nth-of-type(odd) {
  background: red;
}
p:nth-of-type(even) {
  background: blue;
}

직접 시도해 보세요

예제 3

공식(an + b) 설명:a 는 정수 단계를 나타내며, n은 0에서 시작하는 모든 비음수 정수입니다,b 는 정수 오프셋입니다.

여기서, 우리는 인덱스가 3의 배수인 모든 <p> 요소에 배경색을 지정합니다(세 번째, 여섯 번째, девять 번째 등 요소를 선택합니다):

p:nth-of-type(3n+0) {
  background: red;
}

직접 시도해 보세요

예제 4

여기서, 우리는 인덱스가 3의 배수인 모든 <p> 요소에 배경색을 지정합니다. 그런 다음 1을 뺍니다(두 번째, 다섯 번째, 여덟 번째 등 요소를 선택합니다):

p:nth-of-type(3n-1) {
  background: red;
}

직접 시도해 보세요

CSS 문법

:nth-of-type(index |奇数| 짝수| an+b) {
  css 선언;
}

기술 세부 사항

브라우저 지원

표格에서의 숫자는 이伪클래스를 최초로 지원하는 브라우저 버전을 지정합니다.