의사 클래스 (pseudo-classes)

http://msdn.microsoft.com/ko-kr/library/ee371288(v=expression.40).aspx

 

http://msdn.microsoft.com/ko-kr/library/gg721782(v=expression.40).aspx

:nth-child ( n ) { sRules }

 

의사 클래스는 CSS Selectors Level 3(CSS 선택기 수준 3) 에 정의되어 있습니다.

http://www.w3.org/TR/css3-selectors/

Selectors Level 3

 

http://api.jquery.com/nth-child-selector/

 

 

ie6 에서는 동작하지 않는것도 있다.

 

EXAMPLE

nth-child

<style>
li:nth-child(1){color:red}/*li 요소중 첫번째 */
li:nth-child(2){} /*li 요소중 두번째 선택*/
li:nth-child(n){} /*li 요소중 n번째 번호는 0 부터시작 따라서 모든 요소 */
li:nth-child(2n){}/*li 요소중 2n번째 0,2,4,6... */
li:nth-child(2n+1){color:red}/*홀수*/
li:nth-child(2n+2){color:blue}/*짝수*/
</style>
<ul>
    <li>첫번째</li>
    <li>두번째</li>
    <li>세번째</li>

    <li>네번째</li>
    ...
    <li>열번째</li>
</ul>