:nth-child(n)
가상 클래스
:nth-child(n)
가상 클래스 선택자는
부모 요소의 자식 요소 중에서 인덱스를 기준으로 n
번째에 위치하는 요소들을 선택합니다.
예를 들어, ul li:nth-child(2)
는 ul
요소의 자식 li
요소 중에서 2번째에 위치한 요소를 선택합니다.
부모 요소의 자식 요소 중에서 인덱스를 기준으로 뒤부터 계산하여 n
번째에 위치하는 요소들을 선택하려면 :nth-last-child(n)
가상 클래스 선택자를 사용하세요.
- li
- li
- li
- li
- li
- li
- li
- li
:nth-child(n)
가상 클래스의 형식은 다음과 같습니다.
구문
:nth-child(n)
가상 클래스의 n
을 하나의 매개변수로 사용해 지정합니다.
매개변수 n
의 값
부모 요소의 자식 요소 중에서 선택하려는 요소의 매개변수입니다. 매개변수 n
은 세 가지 방법으로 값을 지정할 수 있습니다.
- 음이 아닌 정수 인덱스 값
- 키워드 값(
odd
또는even
) An+B
형태의 사용자 지정 패턴
음이 아닌 정수 인덱스 값
부모 요소의 자식 요소 중에서 음이 아닌 정수로 인덱스를 매겨 그 순서에 맞는 요소를 선택합니다. 인덱스는 1부터 시작합니다.
- li
- li
- li
키워드 값(odd
또는 even
)
odd |
부모 요소의 자식 요소 중에서 홀수 번째(1, 3, 5, 7, ...)에 위치하는 요소들을 선택합니다. |
---|---|
even |
부모 요소의 자식 요소 중에서 짝수 번째(2, 4, 6, 8, ...)에 위치하는 요소들을 선택합니다. |
- li
- li
- li
- li
An+B
형태의 사용자 지정 패턴
An+B
형태의 사용자 지정 패턴을 만족한 인덱스를 가지는 요소들을 선택합니다.
A
는 정수 인덱스 증감 단계,B
는 정수 오프셋으로 생략 가능하며,n
은 0부터 시작하는 모든 양의 정수를 나타냅니다.
이는 목록의 An+B
번째 요소로 읽을 수 있습니다.
다음은 :nth-child(An+B)
선택자를 활용한 요소 선택을 패턴화해서 스타일한 예제입니다.
이 예제를 보면 알 수 있듯이 :nth-child(n)
가상 클래스 선택자에 An+B
형태의 사용자 지정 패턴을 활용하면 요소 선택을 패턴화하기 쉽습니다.
브라우저 호환성
마지막 업데이트 정보: 2024-05-02
선택자 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
---|---|---|---|---|
:nth-child()
|
1 | 112 | 3.5 | 3.1 |
부모 요소가 없는 요소와 일치 | 57 | 79 | 52 | 지원하지 않음 |
명세서
명세서 사양 | |
---|---|
:nth-child()
|
Selectors Level 4 #nth-child-pseudo |