last-child가 동작하지 않을 때 해결방법

작업하던 중 last-child가 제대로 동작하지 않았습니다. 마지막 자식 아래에 다른 요소 태그가 존재하면 last-child를 사용할 수 없기 때문이었습니다. 아래와 같은 코드를 가정해 보겠습니다.

<div>
  <p>배송기간(물류센터)</p>
  <p>배송지역</p>
  <p>배송비</p>
  <a>접기</a>
</div>

아래의 스타일은 동작하지 않습니다. 

p:last-child {
  color:red;
}

 

이럴 때  끝에서부터 선택하는 nth-last-of-type(1)나 마지막을 찾아주는 last-of-type()를 사용하면 동작합니다. 

p:nth-last-of-type(1) {
  color:red;
}

p:last-of-type {
  color:red;
}

 

이것들은 똑같이 동작합니다.