CSS nth-child() 셀렉터

1 개요

CSS nth-child() Selector

CSS nth-child() 셀렉터

• CSS 의사-클래스 셀렉터 중 하나
• 부모의 n번째 자식 요소를 선택

2 예시

html

Copy

<style>
span:nth-child(1) { background: yellow; }
span:nth-child(2) { color: red; }
span:nth-child(3) { background: pink; }
</style>

<div>
    <span>박스1</span>
    <span>박스2</span>
    <span>박스3</span>
    <span>박스4</span>
</div>
<div>
    <p>안녕</p>
    <span>박스1</span>
    <span>박스2</span>
    <span>박스3</span>
    <span>박스4</span>
</div>

3 같이 보기

• CSS nth-of-type() 셀렉터
• CSS 셀렉터 n번째부터 전체 선택

4 참고

• http://www.w3schools.com/cssref/sel_nth-child.asp