:nth-child() / :nth-of-type()

구조적 가상 클래스
: 문서구조에서 위치나, 다른 요소와의 관계에 따라 요소를 선택하게 해주는 선택자.

:nth-child() 가상 클래스는 부모의 n번째 위치에 있는 자식을 선택 합니다.

n값으로 들어 갈 수 있는 것

• 키워드
• 숫자
• 수식(an+b)

#1 키워드

• even : 짝수 번 째에 있는 요소
• odd : 홀수 번 째에 있는 요소

#2 숫자

괄호 안에 숫자를 넣어서 몇번째 요소인지 선택할 수 있다. js와 달리 css에서는 1부터 세기 때문에 첫번째 요소를 선택하고자 할 땐, nth-child(1)을 시작으로 사용하면 된다.

#3 수식

(an + b)
a : 선택할 숫자 간격
b : 선택할 시작 숫자 값

ex. :nth-child(2n+2)
(2 x 0) + 2 = 2
(2 x 1) + 2 = 4
(2 x 2) + 2 = 6
...
→ 2, 4, 6 번째 요소 선택