[CSS] 의사클래스 - nth-child, nth-of-type, nth-last-child, nth-last-of-type


Study/Javascript, Jquery, CSS  2020. 1. 15. 23:29

안녕하세요. 명월입니다.


이 글은 CSS의 의사클래스(nth-child, nth-of-type, nth-last-child, nth-last-of-type)에 대한 글입니다.

이전에 태그의 속성(attribute)를 이용해서 html 요소를 선택하는 방법에 대해 설명했습니다.

링크 - [CSS] 속성 선택자


이번에는 요소의 위치에 대해서 선택하는 방법입니다. 이 CSS의 의사클래스를 사용하는 곳에서는 class나 id, 혹은 속성으로 선택하기 힘든 영역이 있습니다.

특히나 오픈 라이브러리를 사용하는 경우에는 class와 id의 구조가 정확하게 구분하기가 시간도 많이 걸리고 복잡하기 때문에 보통 그때는 의사클래스(태그의 위치)를 이용해서 요소를 선택, 스타일을 적용합니다.

<!DOCTYPE html>
<html>	
 <head>	
   <title>css</title>
   <style>
   /* table 태그의 기본적인 세팅*/
   table {
     border-spacing: 0px;
     padding: 0px;
   }
   /* 테이블의 컬럼에 구분하기 편하게 너비와 테두리를 설정*/
   th,td{
     border: 1px solid #000;
     width: 100px;
   }
   </style>
 </head>	
 <body>	
  <table>	
    <tbody>	
      <tr>	
        <td>	
          <p>1</p>	
          <p>2</p>	
        </td>	
        <td>	
          <p>3</p>	
          <p>4</p>	
        </td>	
      </tr>	
      <tr>	
        <td>	
          <p>5</p>	
          <span>6</span>	
        </td>	
        <td>	
          <p>7</p>	
          <span>8</span>	
        </td>	
      </tr>	
    </tbody>	
  </table>	
 </body>	
</html>

nth-child의 사용법은 요소:nth-child(n)의 형태로서 요소의 n번째의 요소를 선택하는 것입니다.

예로 4번의 값을 선택하려고 한다면 tbody > tr:nth-child(1) > td:nth-child(2) > p:nth-child(2)의 선택 구문이 됩니다.

뜻으로는 tbody의 바로 밑 파생 tr의 1번째에서 바로 밑 파생 td의 2번째의 바로 밑 p태그의 2번째입니다.

tbody > tr:nth-child(1) > td:nth-child(2) > p:nth-child(2){
  background-color: yellow;
}

8의 표시가 되어 있는 span태그를 선택해 보겠습니다.

위 4번을 선택하는 것과 다른 점은 td태그 안에 p태그와 span태그가 혼재되어 있는 경우입니다. ul태그의 경우는 하위 태그가 같은 태그로 이루어 지는 경우도 있습니다만 보통은 여러 태그가 혼재되어 있는 경우가 대부분입니다.

그래서 위 처럼 단순하게 접근한다고 tbody > tr:nth-child(2) > td:nth-child(2) > span:nth-child(1)로 접근을 하면 선택이 되지 않습니다.

선택이 되지 않는 이유에 대해 span태그가 한개가 있으니 span:nth-child(1)로 접근한 것이 문제가 되는데 nth-child의 경우는 반대로 td 태그 안에 1번째 태그가 span인 경우를 선택하는 것으로 이해를 해야 합니다.

즉, tbody > tr:nth-child(2) > td:nth-child(2)의 하위로는 p태그와 span태그가 있으나 첫번째 태그가 span이 아니기 때문에 어떠한 것도 선택이 되지 않는다는 의미입니다.

span:nth-child(2)로 선택을 해야 8번이 선택이 되는 것입니다. 두번째 태그가 span인 경우에 선택의 의미이기 때문입니다.


이게 실제로 의사클래스로 선택자를 찾아가다 보면 의외로 헤갈리는 경우가 많습니다. 그렇다면 태그의 위치에 대한 태그 종류를 선택하는 것이 아닌 태그 종류별로 태그의 위치를 선택하는 방법은 nth-of-type이 되는 것입니다.

child는 태그의 순서, type은 순서별 순서라고 이해하는 게 좋을 듯 싶네요.

tbody > tr:nth-child(2) > td:nth-child(2) > span:nth-of-type(1)이라고 작성하면 8번이 선택이 될 것입니다.

tbody > tr:nth-child(2) > td:nth-child(2) > span:nth-of-type(1){	
  background-color:yellow;	
}

nth-last-child와 nth-last-of-type에 대해서는 키워드에 last가 포함되어 있는 의미로 하위 태그의 앞에서의 순서가 아닌 뒤에서의 순서를 나타내는 것입니다.

tbody > tr:nth-child(1) > td:nth-child(1) > p:nth-last-child(1)의 의미로는 첫번째 tr, 첫번째 td에서 뒤에서 첫번째의 p태그인 2가 선택이 되겠네요.

tbody > tr:nth-child(2) > td:nth-child(1) > span:nth-last-of-type(1)의 의미로는 두번째 tr, 첫번째 td에서 span 태그 중 뒤에서 첫번째 태그인 6이 선택이 될 것입니다.

tbody > tr:nth-child(1) > td:nth-child(1) > p:nth-last-child(1){
  background-color:red;
}
tbody > tr:nth-child(2) > td:nth-child(1) > span:nth-last-of-type(1){
  background-color:blue;
}

여기까지 CSS의 의사클래스(nth-child, nth-of-type, nth-last-child, nth-last-of-type)에 관한 설명이었습니다.


궁금한 점이나 잘못된 점이 있으면 댓글 부탁드립니다.