"CSS nth-child() 셀렉터"의 두 판 사이의 차이

2017년 6월 27일 (화) 00:59 기준 최신판

1 개요[ | ]

CSS nth-child() Selector
CSS nth-child() 셀렉터

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

2 예시[ | ]

<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 같이 보기[ | ]

4 참고[ | ]

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

@@ 2번째 줄: / 2번째 줄: @@
 ;CSS nth-child() Selector
 ;CSS nth-child() 셀렉터
+* [[CSS 의사-클래스 셀렉터]] 중 하나
+* 부모의 n번째 자식 요소를 선택
+==예시==
 <source lang='html5'>
 <style>
@@ 24번째 줄: / 27번째 줄: @@
 </div>
 </source>
-</jsfiddle>0foLh6L9</jsfiddle>
+<jsfiddle height='150'>0foLh6L9</jsfiddle>
 ==같이 보기==
-*[[CSS nth-of-type() 셀렉터]]
+* [[CSS nth-of-type() 셀렉터]]
+* [[CSS 셀렉터 n번째부터 전체 선택]]
-==참고 자료==
+==참고==
 *http://www.w3schools.com/cssref/sel_nth-child.asp
-[[분류: CSS]]
+[[분류: CSS 셀렉터]]