CSS :nth-child 계산기
:nth-child(An+B) 공식을 입력하면 1번째부터 어떤 자식 요소가 선택되는지 격자로 바로 보여줍니다. even·odd 같은 줄임말도 지원합니다.
An+B 형태, 또는 even·odd·상수 하나만 입력할 수 있습니다.
:nth-child(3n+1)
8개 선택됨
1번째부터 3개마다 하나씩 선택됩니다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
CSS Selectors Level 4 명세의 An+B 문법입니다. 자식 요소의 순서 i(1부터 시작)가 A×k+B(k는 0 이상의 정수)를 만족하면 그 요소가 선택됩니다.
even은 2n, odd는 2n+1의 줄임말입니다. A가 음수면 B번째부터 아래로 내려가다 1번째에서 멈추는 유한 목록이 됩니다.사용 방법
- 1:nth-child() 안에 넣을 공식을 입력합니다(예: 3n+1, even, odd, 5).
- 2자식 요소 개수를 정하면 그 범위 안에서 몇 번째가 선택되는지 격자로 보입니다.
- 3진하게 표시된 칸이 실제로 CSS가 선택하는 요소입니다.
자주 묻는 질문
자식의 순서 i(1번째부터 시작)가 A×k+B(k는 0 이상의 정수)를 만족하면 그 요소가 선택됩니다. 예를 들어 "3n+1"은 A=3, B=1이라 k=0,1,2,…를 넣어 1, 4, 7, 10번째가 선택됩니다.
even은 2n(2, 4, 6…)의 줄임말이고, odd는 2n+1(1, 3, 5…)의 줄임말입니다. CSS Selectors Level 4 명세에 정의된 표준 별칭입니다.
A를 생략하면 1로 취급합니다. "n+3"은 "1n+3"과 같아서 3번째부터 끝까지 전부 선택됩니다.
B번째부터 아래로 A의 절댓값만큼씩 내려가다 1번째 이하로 내려가면 멈추는 유한한 목록이 됩니다. 예를 들어 "-n+3"은 3, 2, 1번째만 선택되고 더 내려가지 않습니다.
A=0, B=5로 취급되어 5번째 요소 딱 하나만 선택됩니다. :nth-child(5)와 같습니다.
알아두면 좋은 점
- CSS Selectors Level 4 명세의 An+B 문법을 그대로 계산합니다. 브라우저마다 다르게 해석할 여지가 없는 명세 정의입니다.
- :nth-of-type()은 같은 태그의 형제만 세는 등 :nth-child()와 셈하는 대상이 다릅니다. 이 도구는 :nth-child() 기준입니다.
함께 보면 좋은 도구
마지막 검증: 2026년 9월 9일 · 결과는 참고용 추정치입니다.