[CSS] nth-child() , nth-of-type 구조 가상 클래스 선택자 ✍️

👨‍💻 문서 구조를 사용하는 가상 클래스

여러 항목이 나열된 웹 문서에서 일부만 선택해 스타일을 적용하는 선택자이다.

---

:nth-child 클래스는 자식 요소가 여러 개이고 그 중에서 특정한 위치의 요소를 선택할 때 사용한다.

복잡한 패턴을 처리하기에도 좋아서 자주 사용된다. () 괄호 안에는 위칫값을 숫자로 지정하여 사용된다.

 

 

nth-child(2n) 은 짝수번째 자식 요소를 선택하겠다는 뜻이며, 2n 대신 even 키워드를 사용할 수도 있다.

ex)nth-child(even)

nth-child(2n+1) 은 홀수번째 자식 요소를 선택하겠다는 뜻이며, 2n+1 대신 odd 키워드를 사용할 수도 있다.

ex)nth-child(odd)

---

아래 처럼 구간 요소를 선택할 수 있다.

 

(네 번째 요소부터 모든 요소 선택)

 

(첫 번째 요소부터 시작해 네번 째 요소까지 선택)

(두 번째 자식 요소부터 다섯 번째 자식 요소까지 선택)

---

:nth-of-type 클래스는 같은 타입의 요소들 사이에서 순서를 지정한다. 최근 웹 사이트는 동적으로 만들어져 상황에 따라, 시간에 따라 다른 내용이 나타날 수 있다. 따라서 정확하게 몇 번째로 지정하는 것보다 제목 태그를 사용한 요소 중에서 몇 번째, 단락 태그를 사용한 요소 중에서 몇 번째로 선택하는 것이 더 편리하다.