nth-child와 nth-of-type

nth-child를 쓰다보면 내가 원하는 태그를 선택하지를 못하는 경우가 많아 답답했었다. 이 부분을 공부하면서 개념을 정확히 이해했다. 나와 비슷한 의문을 가진 사람들에게 도움이 되길!

	<ul>
        <li>one</li> // 이 li를 선택하려면?
        <li>two</li> 
        <li>three</li>
        <li>four</li>
        <li>five</li>
    </ul>

위의 코드에서 li 중 첫 번째 요소를 선택하려면 어떻게 하면 될까?
first-child를 쓸 수도 있지만, 여기에서는 nth-child를 활용하여 아래와 같이 선택해보자.

    li:nth-child(1){
        color:red;
    }

그런데 li 위에 h1 태그가 삽입된다면 위의 방법으로는 li의 두 번째 요소를 선택할 수 없다. 왜일까?

	<ul>
    	<h1>Numbers</h1>
        <li>one</li>
        <li>two</li>  
        <li>three</li>
        <li>four</li>
        <li>five</li>
    </ul>
    
    li:nth-child(1){
        color:red;
    }  /* li 중 첫 번째 요소를 선택하지 못한다. */

:nth-child()

• 형제 사이에서의 순서에 따라서 요소를 선택한다.
• 즉, 부모의 입장에서 지정된 순서의 자식을 선택한다.

따라서, 위의 예제에서 부모는 ul 태그이고 ul의 첫 번째 자식은 h1이기 때문에 li:nth-child(1)은 h1를 가리키게 된다. 그동안은 li를 써주면 그 앞에 뭐가 있든 li 중에서 첫번 째를 찾는 것이 아닌가 했었는데, nth-child는 부모를 고려해야 한다는 것을 알게 됐다.

그렇다면 li 앞에 뭐가 끼어들던 간에 li의 첫 번째 요소를 선택하려면 어떻게 해야할까? 그럴 때 사용하는 것이 nth-of-type이다.

:nth-of-type()

• 부모 요소의 자식 중에서 같은 유형의 n번째 형제를 선택한다.
• type 조건과 순서 조건을 모두 만족해야한다.

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

즉, 부모인 ul의 자식 중에서 li라는 type를 만족하는 요소 중 첫 번째라는 의미이다. 위의 예제에서 li 앞에 h1이 몇 개가 오더라도 li 중 첫 번째 요소를 선택할 수 있다.

주의 nth-of-type의 경우도 단순히 작성 순서에 따라서 스타일이 들어가야 한다면 유용하지만, 순서에 상관 없이 콘텐츠에 따라서 스타일이 들어가야 한다면 class나 id를 주는 것이 낫다.