:nth-child와 :nth-of-type의 차이점
:nth-child는 태그의 이름이나 속성에 관계없이 모든 태그를 선택해야할 때 유용한 명령이고,
:nth-of-type은 선택한 태그의 이름과 속성이 모두 일치하는 태그만을 선택해야할 때 유용한 명령이다.
:nth-child 설명
내용은 mdn web docs에서 제공되는 설명을 기준으로 한다.
a:nth-child, p:nth-child와 같이 태그를 지정하는 것도 가능하지만, 특정 태그를 지정해서 탐색하는 것이 목적이라면 :nth-child보다는 :nth-of-type을 사용해야 한다.
div 하위 에 다음과 같이 11개의 태그들이 있다고 가정한다.
div
a a a a p a p p p a p
div > :nth-child(5)
태그에 관계없이 div 하위에서 5번째 태그가 선택된다.
div
a a a a p a p p p a p
div > :nth-child(3n)
div 하위에 3번째 태그부터 시작하고, 스탭을 3씩 밟는다.
즉, 3, 6, 9, .. 번째 태그를 선택한다.
div
a a a a p a p p p a p
div > :nth-child(3n+5)
3n과 마찬가지로 3씩 뛰어넘지만, 5번째 태그를 시작점으로 한다.
즉, 5번째 태그를 시작으로 3씩 스탭을 밟기 때문에 5, 8, 11, ..번 째 태그가 선택된다.
div
a a a a p a p p p a p
div > :nth-child(-2n+7)
마이너스(-)n을 지정하면 반대 선택도 가능하다. -2n+7으로 지정하면 7번째 태그를 마지막 지점으로 삼고 2씩 뛰어넘는다.
div
a a a a p a p p p a p
div > :nth-child(n+4):nth-child(-n+6)
:nth-child(n):nth-child(-n)과 같이 2개의 nth-child 명령을 이어쓰면 범위선택이 가능하다.
n+(숫자)는 시작점이 되고,
-n+(숫자)는 마지막 선택점이 된다.
div
a a a apa p p p a p
추가 옵션
:nth-child() 명령은 아니지만 알고 있으면 도움이 될만한 명령어들이다.
div > :nth-last-child(2)
:nth-child()와 같은 명령어지만, 인덱스를 역순으로 잡는다.
:nth-child(2)는 앞에서 2번째 태그를 선택하지만, :nth-last-child(2)는 뒤에서 2번째 태그를 선택한다.
div
a a a a p a p p p a p
div > :first-child
첫 번째 하위 태그를 선택한다.
:nth-child(1)과 동일한다.
div
a a a a p a p p p a p
div > :last-child
마지막 하위 태그를 선택한다.
현재 예시를 기준으로 :nth-last-child(1)과 동일한다.
div
a a a a p a p p p a p
div > :nth-child(even)
짝수 인덱스를 가진 chlid를 선택한다.
:nth-child(2n)과 동일하다.
div
a a a a p a p p p a p
div > :nth-child(odd)
홀수 인덱스를 가진 chlid를 선택한다.
:nth-child(2n+1)과 동일하다.
div
a a a a p a p p p a p
:nth-of-type 설명
내용은 mdn web docs에서 제공되는 설명을 기준으로 한다.
a:nth-child, p:nth-child와 같이 태그를 지정하는 것도 가능하지만, 특정 태그를 지정해서 탐색하는 것이 목적이라면 :nth-child보다는 :nth-of-type을 사용해야 한다.
div 하위 에 다음과 같이 11개의 태그들이 있다고 가정한다.
div
a a a a p a p p p a p
div > :nth-of-type(1)
div 하위에 위치한 각 태그의 1번째 태그들이 선택된다.
div
a a a a p a p p p a p
div > p:nth-of-type(1)
div 하위에 위치한 1번째 p 태그가 선택된다.
div
a a a a p a p p p a p
div > a:nth-of-type(2n)
{숫자}n 의 숫자만큼 태그를 뛰어넘어 선택한다.
2n의 경우 스탭을 2씩 밟는다.
div
a a a a p a p p p a p
div > a:nth-of-type(2n+1)
스탭을 2씩 밟지만, 시작점은 2번째 a태그가 아닌 1번째 a태그다.
div
a a a a p a p p p a p
div > a:nth-of-type(-2n+3)
{음수}n+{숫자} 명령도 가능하다.
음수가 지정된 경우 숫자를 마지막 지점으로 음수에 해당하는 숫자만큼 스탭을 밟는다.
div
a a a a p a p p p a p
div > a:nth-of-type(n+3):nth-of-type(-n+5)
2개의 :nth-of-type 명령을 사용해 범위 선택이 가능하다.
n+3에서 3이 시작점, -n+5에서 5가 마지막 지점이 된다.
div
a a aa p a p p p a p
추가 옵션
:nth-of-type() 명렁어는 아니지만, 알고 있으면 도움이 될 수 있는 명령어들이다.
div > a:nth-last-of-type(1)
a:nth-of-type()과 동일하지만, 인덱스를 역순으로 하는 명령이다.
a:nth-of-type(1)과는 정반대의 결과를 보여준다.
div
a a a a p a p p p a p
div > :nth-last-of-type()
div의 하위 태그들 중 1번째에 해당하는 태그를 선택한다.
:nth-last-of-type()은 모든 태그들 중 마지막에 위치한 태그들을 선택하고,
p:nth-last-of-type()은 p 태그들 중 마지막에 위치한 태그를 선택한다.
:nth-last-of-type(1)과 동일한 명령이다.
div
a a a a p a p p p ap
div > :first-of-type()
div의 하위 태그들 중 1번째에 해당하는 태그를 선택한다.
:nth-first-of-type()은 모든 태그들 중 1번째에 해당하는 태그들을 선택하고,
p:nth-first-of-type()은 p 태그들 중 1번째에 해당하는 태그를 선택한다.
:nth-of-type(1)과 동일한 명령이다.
div
a a a a p a p p p a p
div > :last-of-type()
div의 하위 태그들 중 뒤에서 1번째에 해당하는 태그를 선택한다.
:nth-last-of-type()은 모든 태그들 중 1번째에 해당하는 태그들을 선택하고,
p:nth-last-of-type()은 p 태그들 중 1번째에 해당하는 태그를 선택한다.
:nth-last-of-type(1)과 동일한 명령이다.
div
a a a a p a p p p ap
div > a:nth-of-type(even)
a태그들 중 짝수번째에 해당하는 태그들을 선택한다.
a:nth-of-type(2n)과 동일하다.
div
a a a a p a p p p a p
div > a:nth-of-type(odd)
a태그들 중 홀수번째에 해당하는 태그들을 선택한다.
a:nth-of-type(2n+1)과 동일하다.
div
a a a a p a p p p a p