더북(TheBook)

:nth-last-child(n) 선택자는 선택자를 찾는 기준이 부모 요소의 끝에서부터라는 것만 빼면 :nth-child(n) 선택자와 똑같습니다. 예를 들어, 다음과 같이 선택자를 작성하면 부모 요소에서 끝에서부터 두 번째 자식 요소가 p 태그일 때 선택합니다.

05/04/nth-last-child.html

  <style>
    p:nth-last-child(2){
      color:red;
    }
  </style>
(중략)
<body>
  <p>lorem 0</p> /* 부모인 body 태그의 자식 중 끝에서 두 번째 요소가 아니므로 적용 안 됨 */
  <div>
    <p>lorem 1</p> /* 부모인 div 태그의 자식 중 끝에서 두 번째 요소가 p 태그이므로 스타일 적용 */  
    <p>lorem 2</p>
  </div>
  <div>
    <p>lorem 3</p> /* 부모인 div 태그의 자식 중 끝에서 두 번째 요소가 p 태그이므로 스타일 적용 */
    <p>lorem 4</p>
  </div>
</body>
신간 소식 구독하기
뉴스레터에 가입하시고 이메일로 신간 소식을 받아 보세요.