[CSS] last-child가 작동하지 않는 이유, 해결 방법

 

🧐

업무를 하는 중.. 

퍼블에서 디자인 해서 보내준 페이지와 적용 후 개발 페이지가 디자인적으로 다른 부분이 있는 이슈가 있었다. 

나는 발견도 못했던 것을 QA 중 디자인하신 분이 왜 오른쪽 부분에 선이 두개냐고 물어보셔서 이제야 눈치를 챘다ㅋㅋㅋ

역시 보는 관점이 다르긴 하다. 

 

css 파일은 받아서 그대로 적용했을 뿐인데 왜 동일하게 적용이 안되나..? 하고 차이점을 보니까 

css 에서 last-child를 통해 border-right를 0px로 주어 맨 오른쪽에는 선이 안나오도록 했는데 

개발 페이지에서는 그 부분이 적용되지 않아서 선이 하나 더 생겼고, 결과 두 줄로 보이는 현상이 있었다. 

 

왜 last-child가 적용되지 않지..? 하고 찾아보니까 

last-child는 마지막 자식 아래에 그냥 아무 요소든 또 다른 요소가 존재하면 last-child를 사용할 수 없다고 한다..!!

페이지 소스 보기를 통해 보니까 적용되어야 하는 div가 마지막 자식은 맞지만 그 밑에 <script> 태그가 있어서.. 마지막 자식으로 해당이 안됐나 보다..! script도 포함되는지는 몰랐다.. 따라서 이를 해결하기 위해서 

nth-last-of-type(1)을 사용해서 맨 마지막 요소에 border-right를 0px로 적용할 수 있도록 코드를 변경하니까 적용됐다. 

 

div:nth-last-of-type(1) {
   border-right: 0;
}

 

💡 last-child가 적용되지 않는 분들은 페이지 소스보기를 통해 소스 확인해보면.. 아마 저처럼 몰랐던 태그를 발견하실겁니다 핳... 그럴땐  nth-last-of-type()을 사용해보길... 😎