오늘은 CSS 기초를 배웠다. 셀렉터를 배우고 문제를 푸는 도중 이상한 상황을 맞닥뜨렸다.
나는 No를 골랐다. div 자식 중에 마지막에서 두 번째 자식을 고르는 건데 header, footer 사이에 있는 div는 마지막에서 두 번째 자식이 아니라고 생각했기 때문이다.
근데 답은 Yes라고 한다.
도대체 왜지?
내가 잘못 알고 있는 건가 싶어 비슷하게 다시 상황을 재현해보았다.
nth-last-child() 의사 클래스는 형제 그룹에서 제일 마지막 요소부터 순서를 매기는 패턴을 나타내는 인수 1개를 선택합니다.
위 정의를 보면 분명 <header></header>
, <div></div>
, <footer></footer>
중에서 뒤에서 두 번째인<div></div>
도 선택되는 것이 맞다.
근데 왜 재현 화면에서는 두 번째 div 가 선택되지 않은 걸까..?
liveServer의 문제였다...
body의 자식이 몇 개인지 알아보니, 총 4개였다.
liveServer가 동작되는 과정에서 <script > 태그가 추가되었고, 그 <script > 태그까지 body의 자식으로 인식하여 위처럼 예상치 못한 동작을 마주하게 된 것이다.
liveServer가 아닌 npx http-server .
로 재현 화면을 띄워보았다.
이제 예상대로 동작하는 것을 확인할 수 있다.
body의 자식이 몇 개인지 여기서 확인해보니 예상대로 총 3개다.
앞으로 liveServer... 쓰지 않겠습니다. 바로 삭제 ❌❌❌❌❌❌❌❌❌
nth-last-child()
는 이제 절대 못 잊을 셀렉터가 되었다...
혹시나 잘못된 정보가 있다면 댓글로 알려주세요 ! 저의 성장의 큰 도움이 될 것 같습니다.🌱