nth-of-type, nth-last-of-type

nth-of-type, nth-last-of-type

nth-of-type 의사 클래스는 부모 내에 포함된 모든 자식들을 선택한다는 의미에서는 nth-child, nth-last-child 의사 클래스와 비슷하지만 특정 요소에 해당하는 자식 요소(들)만을 선택한다는 점에서 다릅니다. 마찬가지로 nth-last-of-type 의사 클래스는 nth-last-child 의사 클래스를 유사하며 특정 요소에 해당하는 자식 요소(들)만을 선택한다는 점에서 다릅니다.

방금 전 예제를 가지고 알아볼까요? 메모장으로 "rootnthnth-lastEx.html"을 열고 <style> … </style> 블록을 다음과 같이 수정합니다.

  <style>

    :root { background-color: yellow; }

    table{ border-collapse: collapse;}

    th,td{border: none;}   

    tr:nth-of-type(1){background-color: green;}

  </style>

위에서 보는 것처럼 tr 자식 요소들 중 첫 번째 자식 요소에 배경색을 녹색으로 적용하도록 하였습니다. 메모장에서 다른 이름으로 저장을 선택하여 “nth-of-typeANDnth-last-of-type.html”로 저장한 후 IE9를 통해 열어보면 다음과 같이 나타나게 됩니다.

다음으로 tr 자식 요소들 중 3 번째 자식 요소에 적용해볼까요? 위 코드에서 다음과 같이 코드를 수정, 저장합니다.

    tr:nth-of-type(3){background-color: green;}

짝수(even), 홀수(odd) 형태로 적용하려면 위에서 “even”, “odd” 형태로만 바꿔주면 됩니다.
같은 방법으로 nth-last-of-type 의사 클래스에 대해서 보면 제일 마지막 데이터 행만 선택할 경우에는 다음과 같이 해주면 됩니다.

    tr:nth-last-of-type(1){background-color: green;}

그럼 마지막, 그리고 그 바로 앞에 오는 데이터 행 2개만을 선택할 경우에는 어떻게 하면 될까요? 이미 아시겠지만 nth-last-child 의사 클래스와 같은 원리로 아래와 같이 작성해주면 됩니다.

    tr:nth-last-of-type(-n+2){background-color: green;}

그래서 다음과 같이 나타나게 되는 것입니다.

- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 CSS3에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인 학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기 바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를 비밀댓글로 남겨주시면 연락드리겠습니다.