NTH OF TYPE

태그의 타입과 동일한 타입인 형제요소 중  n번째 요소 선택

클래스로 입력한다고 해도 클래스명으로 요소를 찾는 것이 아닌 클래스를 가진 요소의 태그를 가지고 찾음.

zero 베이스(0부터 시작)

 

예시1)

<div class='box-group'>

<div>1</div>

<p>2</p>

<span>3</span>

<p>4</p>

</div>

.box-group p:nth-of-type(1)

- box-group 클래스 안에 첫번째 p태그

 

** 숫자 2에 css 적용됨.

 

 

 

 

 

예시2)

<ul class='box-group'>

<li>1</li>

<li class='small'>2</li>

<li>3</li>

<li class='small'>4</li>

</ul>

 

.box-group .small:nth-of-type(1)

- box-group 클래스 안에 small이라는 클래스를 가지고 있는 첫번째 태그

 

*** 위의 예시 html에 적용된 첫번째 li는 small이라는 클래스를 가지지 않기 때문에 아무것도 적용안됨.