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

 

 

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

 

:nth-last-child 가상 클래스 :nth-child 와 한 가지만 빼고 동일 합니다.

 

 :nth-child (n)는 같은 부모의 n번째 자식인 요소라면

 

:nth-last-child(n)는 맨 마지막에서부터 순서를 계산 합니다.

 

 

 

n값 역시 키워드, 정수, 공식이 들어갑니다.

 

키워드 - even, odd

정수 - 음수, 양수, 0

공식- (an+b)

 

a와 b는 정수값(양수, 음수, 0)

 

a는 선택할 숫자 간격, b는 선택할 시작 숫자값

 

n은 카운트 입니다.  첫번째는 0으로 시작하여 1, 2, 3 순으로 카운트 됨.

 

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

 

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

 

(2 x 0) + 3 = 3

(2 x 1) + 3 = 5

(2 x 2) + 3 = 7

 

[css3] :nth-child() 가상 클래스 참조해주세요

 

 

:nth-last-child(2n+3) {color: red;}라고 한다면

끝에서 3, 5, 7번째가 빨간색으로 표시됩니다.

 

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

 

아래 링크에 들어가시면 공식을 넣어 보고 몇번째에 선택이 되는지 테스트 또는 생성해 볼 수 있습니다.

 

http://css-tricks.com/examples/nth-child-tester/#
http://lea.verou.me/demos/nth.html

 

 

▶html/css 작성 예를 볼까요? 

nth-last-child.htm

 

 

html

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

 

css

li:nth-last-child(-n+3):after{content:" √"; color:red;}

(-n+3) 는 컴퓨터는 아래와 같이 계산합니다

(-1 x 0) + 3 = 3

(-1 x 1) + 3 = 2

(-1 x 2) + 3 = 1.

 

위 css에서는 :nth-last-child 가상 클래스와, :after 가상 요소를 혼합해 사용 했습니다.

:after는 css로 내용을 생성하는 가상 요소 입니다.

 

:before , :after 가상 요소

 

content 속성 사용법

 

이 예제에선 맨 마지막에서 1,2,3번째 순서는 체크 표시를 생성하도록 해보았습니다

 

▶실행화면

 

 

 

 

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

 

:nth-of-type() 가상 클래스

 

box-shadow 속성(그림자 효과)

 

border-radius 속성(둥근 모서리)