:nth-child, :nth-of-type

elem:nth-child(n)

elem을 선택하는데, 부모컨테이너에서 모든 자식요소 중 n번째에 있는 elem을 선택한다.

n이 odd이면 부모컨테이너에서 홀수번째에 있는 elem, n이 even이면 짝수번째에 있는 elem이 선택된다.

n을 3n+1과 같이 사용하면 n=0, 1, 2... 인 경우의 1, 4, 7... 번째에 있는 elem이 선택된다.

<style>

p:nth-child(2) {

font-weight: bold;

}

</style>

<div>

<h1>1<h1>

<p>2</p> <-- 이 녀석이 bold가 된다. 부모에서 2번째인 p태그.

<p>3</p>

</div>

즉 모든 자식요소 중에서 n번째가 elem인 경우에만 선택한다. elem 중에 n번째가 아니다.

elem:nth-of-type(n)

elem을 선택하는데, 부모컨테이너에서 n번째인 elem타입을 선택한다.

n은 odd, even, 3n+1과 같은 공식도 대입 가능하다.

<style>

p:nth-child(2) {

font-weight: bold;

}

</style>

<div>

<h1>1<h1>

<p>2</p> 

<p>3</p> <-- 이 녀석이 bold가 된다. 부모의 p태그 중에 2번째인 요소.

</div>

즉 elem 중에서 n번째인 elem을 선택한다. 모든 자식요소 중 n번째에 있는 elem이 아니다.