[HTML/CSS] :nth-chlid(num) / :nth-of-type(num)

nth-child(n)는 부모안에 모든 요소 중 n번째 요소를 선택하는 선택자이다.
처음에 nth-child를 사용했을 때 자꾸 순서가 밀려서 짜증이 났던 기억이 있다.
같은 선택자를 알아서 선택해주는 줄 알았지만.. 그냥 안에 있는 모든 요소를 처음부터 세는 것이었다.

이렇게 나열된 html의 경우에 세번째 라는 명확한 위치가 주어지면 3번째 div에 적용된다.

// html
<div class=“main” id=“main1”>1</div>
<div class=“main” id=“main2”>2</div>
<div class=“main” id=“main3”>3</div>

// css
.main:nth-child(3) {
	background-color: red;
}

하지만 갑자기 다른 요소가 중간에 있으면 :nth-child가 읽는 index가 밀리게 되어 의도한 위치에 마크업을 적용할 수 없다.

// html
<div class=“main” id=“main1”>1</div>
<span>갑툭튀</span>
<div class=“main” id=“main2”>2</div>
<div class=“main” id=“main3”>3</div>

따라서 이런 경우 [선택자:nth-of-type(num)]을 사용한다.
예를 들어 p:nth-of-type(1)인 경우, 부모안에 p라는 선택자 중에서 첫번째 요소를 선택하는 것이다.

추가

:first-child는 부모 요소안의 첫번째 요소, :last-child는 마지막 요소를 선택하는 것이다.

 

 

---

개인적으로 공부한 내용을 정리하는 블로그로
잘못된 개념을 게시하지않도록 주의하고 있으나 오류가 있을 수 있습니다.