last-child가 작동하지 않을 때

오늘 CSS 작업을 하던 중 last-child가 생각대로 작동하지 않는 상황을 발견하였다. 해당 요소가 문제가 있나 싶어서 nth-child()로 선택을 했더니 이건 또 선택이 됐다. 이를 검색해보니 다음과 같은 결론을 얻었다.

 

"마지막 자식 아래에 또다른 요소가 존재한다면 last-child는 사용할 수 없다."

 

이 상황을 코드로 나타내면 다음과 같다.

See the Pen yLaXMRK by ImHyeLim1209 (@imhyelim1209) on CodePen.

 

a:last-child는 a 태그의 마지막 자식 즉 Last Tag 부분이 #00ff00 색으로 바뀔 줄 알았지만 실제로는 동작하지 않았다. 

a 태그 아래에 div 태그가 존재하기 때문이다!

 

---

 

a태그의 마지막 부분을 선택하기 위한 해결방법은 nth-last-of-type(1) 를 사용하는 것이다.

 

See the Pen nth-last-of-type(1) by ImHyeLim1209 (@imhyelim1209) on CodePen.

 

 

 

 

---

참고사이트

css-tricks.com/the-difference-between-nth-child-and-nth-of-type/

The Difference Between :nth-child and :nth-of-type | CSS-Tricks