CSS 선택자 nth-child 와 nth-of-type 사용법 및 차이점

▒ CSS 선택자 nth-child 와 nth-of-type 사용법 및 차이점

 

nth-child와 nth-of-type의 사용법은 동일하나, 결과물의 차이가 분명있다.

사용법만 제대로 안다면 아이디와 클래스 값을 굳이 정의 하지 않아도 코드가 간단명료 해진다.

일단 예제부터 보도록 하자! (하단에 HTML예제파일 다운로드있음)

 

 

예제1)  ul li 세번째 요쇼의 컬러를 #ff0000으로 변경해라

<style>
child_test.ul li:nth-child(3) {color:#ff0000;}  /* ul li 요소의 3번째 색을 #ff000으로 변경해라 */
type_test.ul li:nth-of-type(3) {color:#ff0000;}  /* ul li 요소의 3번째 색을 #ff000으로 변경해라 */
</style>

<!--nth-child -->
<ul class="child_test">
  <p>nth-child</p>
  <li>나는1번</li>
  <li>나는2번</li>
  <li>나는3번</li>
</ul>

<!--nth-of-type -->
<ul class="type_test">
  <p>nth-of-type</p>
  <li>나는1번</li>
  <li>나는2번</li>
  <li>나는3번</li>
</ul>

 

 

과연 결과는 같을까?

 

 

이미 어느정도 예상을 했겠지만, 당연히 결과 값은 다르다.

nth-child는 <ul>요소 안에 있는 <p>부터 카운팅 하지만 nth-of-type는 <li> 요소만을 카운팅한다.

 

정리하면

nth-child는 유형에 관계없이 / nth-of-type는 특정 유형만을 선택한다는 뜻이다. 

이러한 특징을 알고 어디에 어떻게 응용을 할 것인지는 이제 사용자의 몫이다.

 

 

아래표는 두가지 선택자를 활용한 다양한 요소 선택 방법이다. 사용방법은 동일하므로 위의 차이점만을 유의해서 사용하면 된다.

 

:first-child	첫번째 요소를 선택	:first-of-type
:last-child	마지막 요소를 선택	:last-of-type
:nth-child(odd)	홀수인 요소를 선택	:nth-of-type(odd)
:nth-child(even)	짝수인 요소를 선택	:last-of-type(even)
:nth-child(2)	두번째 요소를 선택	:last-of-type(2)
:nth-child(2n+3)	2의 배수인 요소를 선택하나 시작은 세번째 요소부터	:last-of-type(2n+3)
:not(:nth-child(2))	두번째 요소를 제외한 모두를 선택	:not(:last-of-type(2))

 

(2n+3)이 제일 헷갈릴 수 있다. 이 부분은 첨부된 예제를 보고 직접 해보면서 이해하도록 하자!

 

 

예제파일 ↓

nth_ex.html

0.00MB