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

<style>
#box > p:nth-child(2) {
  color: blue;
}
#box > p:nth-of-type(2) {
	color: red;
}
</style>
<div id="box">
  <h2>어떤것이 선택될까?</h2>
  <p>첫번째 단락</p>
  <div>첫번째 박스</div>
  <p>두번째 단락</p>
  <div>두번째 박스</div>
  <p>세번째 단락</p>
  <p>네번째 단락</p>
</div>

:nth-child(n)

태그의 부모요소의 자식요소중에 n번째

 

 

p:nth-child(2)

p 태그의 부모요소인 div 태그의 자식요소중에 첫번째 요소는 h2, 두번째는 p, 세번째는 div... 이렇게 되어 두번째 요소인 첫번째 단락부분이 선택된다.

자식의 두번째 요소가 p가 아닐경우엔 아무것도 선택되지 않는다.

 

 

 

 

:nth-of-type(n)

태그의 부모요소의 자식요소중에 해당 태그 n번째

 

 

p:nth-of-type(2) : 두번쨰 단락이 선택된다.

p태그의 부모 div 자식요소들 중에 p 태그 중에 두번째 요소는 두번째단락이 적힌 p 태그이다.

자식요소에서, p요소 중에 두번째 요소를 선택한다.