nth-child와 nth-of-type의 차이점

CSS pseudo-class 중 nth-child와 nth-of-type가 있다. 코드를 살펴보자.

<p><code>span:nth-child(2n+1)</code>, <em>without</em> an <code>&lt;em&gt;</code>

inside the child elements. Children 1, 3, 5, and 7 are selected, as expected.</p>

<div class="first">

<span>This span is selected!</span>

<span>This span is not. :(</span>

<span>What about this?</span>

<span>And this one?</span>

<span>Another example</span>

<span>Yet another example</span>

<span>Aaaaand another</span>

</div>

<p><code>span:nth-child(2n+1)</code>, <em>with</em> an <code>&lt;em&gt;</code>

inside the child elements. Children 1, 5, and 7 are selected. 3 is used in the

counting because it is a child, but it isn't selected because it isn't a

<code>&lt;span&gt;</code>.</p>

<div class="second">

<span>This span is selected!</span>

<span>This span is not. :(</span>

<em>This one is an em.</em>

<span>What about this?</span>

<span>And this one?</span>

<span>Another example</span>

<span>Yet another example</span>

<span>Aaaaand another</span>

</div>

<p><code>span:nth-of-type(2n+1)</code>, <em>with</em> an <code>&lt;em&gt;</code>

inside the child elements. Children 1, 4, 6, and 8 are selected. 3 isn't

used in the counting or selected because it is an <code>&lt;em&gt;</code>,

not a <code>&lt;span&gt;</code>, and <code>nth-of-type</code> only selects

children of that type. The <code>&lt;em&gt;</code> is completely skipped

over and ignored.</p>

<div class="third">

<span>This span is selected!</span>

<span>This span is not. :(</span>

<em>This one is an em.</em>

<span>What about this?</span>

<span>And this one?</span>

<span>Another example</span>

<span>Yet another example</span>

<span>Aaaaand another</span>

</div>

span, div em {

    padding: 10px;

    border: 1px solid green;

    display: inline-block;

    margin-bottom: 3px;

}

.first span:nth-child(2n+1),

.second span:nth-child(2n+1),

.third span:nth-of-type(2n+1) {

    background-color: lime;

}

적용된 모습은 아래와 같다.

어떤 곳에 lime색 배경이 적용됐는지 확인해보자.

css 코드에서,

'first' class element에는 span:nth-child(2n+1)이라고 되어 있다. class name이 'first'인 element에서, 홀수 번째 자식에게 적용하는데, 단 span element에만 적용한다는 의미이다.

'second' class element에도 역시 span:nth-child(2n+1)이라고 되어 있다. class name이 'second'인 element에서, 홀수 번째 자식에게 적용하는데, 단 span element에만 적용한다는 의미이다.

즉, nth-child는 해당 element의 모든 자식들 중 홀수(혹은 짝수)번째 자식을 고른 다음, 결과적으로 span에게만 적용된다고 생각하면 된다.

'nth-of-type'은 어떨까?

'third' class element에는 span:nth-of-type(2n+1)이라고 되어 있다. 

class name이 'third'인 element에서, type이 span인 자식들 중에서 홀수 번째 자식에게 적용한다는 의미이다. 여기서 중요한 것은, 홀수(혹은 짝수)를 판단하는 기준은 콜론(:) 앞에 붙은 type의 자식들을 기준으로만 선정된다는 것! 여기서 홀수, 짝수를 판단하는 기준에 span 이외의 자식들은 포함되지 않는다.

---

MDN 문서 참조

CSS Selectors Cheatsheet

Specificity