더 "Try it Yourself" 아래의 예.
정의 및 사용
:nth-child( n ) 선택이있는 모든 요소와 일치 n 부모의 유형에 관계없이, 아이 일을.
n 숫자, 키워드 또는 수식 할 수있다.
Tip: 상기 봐 n 번째의 형 () 는 IS 요소 선택 선택 n 자녀 번째, of a particular type 부모의를.
| 번역: | CSS3 |
|---|
브라우저 지원
표의 수치는 완전히 선택기를지지하는 제 브라우저 버전을 지정한다.
| 선택자 | |||||
|---|---|---|---|---|---|
| :nth-child() | 4.0 | 9.0 | 3.5 | 3.2 | 9.6 |
CSS 구문
더 예
예
인덱스가 홀수 또는 자식 요소에 맞게 사용할 수 있습니다 홀수 및 짝수 키워드 (the index of the first child is 1) .
여기서 우리는 홀수 및 짝수 페이지 요소에 대한 두 개의 서로 다른 배경 색상을 지정합니다
p:nth-child(odd)
{
background: #ff0000;
}
p:nth-child(even)
{
background: #0000ff;
}
»그것을 자신을 시도 예
수식 사용 ( an + b ) . 설명 : a 사이클의 크기를 나타내며, n 카운터이다 (starts at 0) 하고, b 오프셋 값입니다.
여기서, 우리는 인덱스 (3)의 복수의 모든 P 요소의 배경색을 지정
p:nth-child(3n+0)
{
background: #ff0000;
}
»그것을 자신을 시도