[css3] :nth-child() 가상 클래스

 

 

[css3] :nth-child()  가상 클래스

 

가상 클래스 중 구조적 가상 클래스를 배워보고 있습니다.

 

구조적 가상 클래스란 문서 구조에서 위치나, 다른 요소와의 관계에  따라 요소를 선택

하게 해주는 선택자입니다.

 

:nth-child() 가상 클래스는  문서 구조에서  부모의 n번째 위치에 있는 자식을 선택합니다. 

 

 

 

n값에는 키워드, 정수, 공식(an+b 같은)이 들어갈 수 있습니다.

 

1. 키워드 - even은 짝수값, odd는 홀수값

 

예>   li:nth-child(even){color:red;}

       목록 중 2,4,6 등의 짝수 값이 빨간색으로 칠해짐

 

 

2. 정수- 양수, 음수, 또는 0 가능

 

예>   li:nth-child(5){color:red;}

     목록 중 5번째만 빨간색으로 칠해짐

 

3. 공식 (예: an+b)

 

a와 b는 정수값(양수, 음수, 0)이 들어가야 하며

 

a는 선택할 숫자 간격

 

b는 선택할 시작 숫자값을 씁니다.

 

n이 의미하는 것은 카운트라고 생각하시면 됩니다. 첫번째는 0으로 시작하여 1, 2, 3 순으로 카운트 됨.

 

또한 an+b는 (a x n)+b 라고 풀어 이해하시면 됩니다.

 

:nth-child(2n+2) 라고 했을 때 컴퓨터는 아래와 같이 계산합니다.

 

(2 x 0 ) + 2  = 2

(2 x 1 ) + 2  = 4

(2 x 2 ) + 2  = 6

(2 x 3 ) + 2  = 8

 

그래서 결과적으로 2, 4, 6, 8번째 요소가 선택 됩니다.

 

:nth-child(2n+2) 는 :nth-child(even) 또는  :nth-child(2n)이라고 해도 같은 결과가 나옵니다.

 

(2 x 0 )   = 0  /* 선택할 요소가 없음*/

(2 x 1 )   = 2

(2 x 2 )   = 4

(2 x 3 )   = 6

(2 x 4 )   = 8

 

이번엔 음수값을 적용한  예입니다

 

:nth-child(2n-1)

 

(5 x 0 ) - 1  = -1 /* 선택할 요소가 없음*/

(5 x 1 ) - 1  =  4

(5 x 2 ) - 1  =  9

(5 x 3 ) - 1  =  14

 

-1, 4, 9, 14번째 요소가 선택 됨

 

:nth-child(-n+3)   /*a가 1이거나 -1일 때 숫자 생략 가능*/

(-0 ) + 3  = 3

(-1 ) + 3  =  2

(-2 ) + 3  =  1

(-3 ) + 3  =  0 /* 선택할 요소가 없음*/

 

3, 2, 1, 0번째 요소가 선택 됨

 

 

sitepoint 사이트에 들어가면, 어떤 공식을 사용해야 몇번째 요소를 선택할지 도표가

 

잘 나와 있습니다.

 

 

▶브라우저 지원 정보 : ie9.0+, chrome 4.0+, firefox 3.5+, safari 3.2+, opera 9.6+

 

▶html/css 작성 예

nth-child.htm

 

 

html

 <ol>
<li>하나</li>
<li>둘</li>
<li>셋</li>
<li>넷</li>
<li>다섯</li>
<li>여섯</li>
<li>일곱</li>
<li>여덟</li>
</ol>

 

 

css

li:nth-child(3n+2){background-color:yellow;}

 

 

▶실행화면

 

 

[css] :focus 가상 클래스

 

[css3] :target 가상 클래스

 

[css3] :checked 가상 클래스

 

 css 선택자, 선택자 종류와 사용법