CSS 가상 선택자 first-child, last-child 선택 안 될 때 조치 방법

친효스킨 신형 댓글 방명록 시스템을 한창 세팅중일 때 한 가지 문제에 봉착하게 됩니다. 가상 선택자 중 하나인 first-child와 last-child가 원하는대로 동작하지 않는 문제였습니다. 예를 들어 이런 경우입니다.

 

증상 확인

See the Pen Untitled by rgy0409 (@rgy0409) on CodePen.

 

위의 예시에서 알 수 있듯 원래대로라면 li 태그 안의 첫번째 숫자와 마지막 숫자가 CSS에 의해 빨간색으로 바뀌어야 합니다. 그런데 변함이 없어요. 원인은 바로 li 전/후에 존재하는 p태그 때문입니다. 즉 first-child와 last-child를 정상적으로 사용하기 위해서는 지정하고자 하는 자식 요소에 해당 태그들만 존재해야 합니다. 만약 전혀 다른 태그가 지정한 위치의 전 후에 존재하면 first 및 last child를 동작하지 않게 됩니다.

 

해결 방법

다행히 이런 문제를 해결할 수 있는 방법이 있습니다. first-of-type 과 nth-last-of type(1) 으로 변경해 사용하면 됩니다. 바로 적용해 봅시다.

 

See the Pen CSS nth-first(last)-of-type(1) by rgy0409 (@rgy0409) on CodePen.

 

보시는 것처럼 first-child는 first-of-type으로 변경함으로서 li 태그의 첫번째가 정상적으로 빨간색으로 변경이 되었음을 알 수 있습니다. 그 전에 몇 개의 다른 태그가 들어와도 전혀 아랑곳하지 않고 적용됩니다. 마찬가지로 last-child는 nth-last-of-type(1)으로 변경함으로서 li 태그의 마지막 숫자가 빨간색으로 정상 적용 되었습니다.

 

참고로 nth-last-of-type(1)에서 괄호 안의 숫자가 증가할수록 맨 마지막 태그로부터 몇 번째 태그가 선택되어지는지에 대해서도 지정 가능합니다. 예시에서는 (1)을 사용했으니 가장 마지막 li 태그가 선택되었는데 만약 (2)로 마크업 하면 마지막에서 두 번째 li 태그가 선택되는 것입니다. 끝!