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

 

 

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

 

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

 

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

 

잠깐 복습해 보면 :nth-of-type은 같은 유형의 n번째 형제인 요소를 선택합니다.

 

:nth-last-of-type(n)은 맨 마지막부터 순서를 계산합니다.

 

 

 

n값은 다른 가상 클래스와 마찬가지로 정수, 키워드, 공식이 들어갑니다.

 

정수- 음수, 양수, 0   

  예> :nth-last-of-type(5)  맨 마지막부터 계산하여 5번째 형제만을 선택함.

 

키워드- even (짝수), odd(홀수)

    예> :nth-last-of-type(even)  맨 마지막부터 계산하여 홀수 형제를 선택함.

 

공식-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

 

:nth-last-of-type(2n+3)이라고 한다면 맨 마지막부터 계산하여

 

같은 유형의 3, 5, 7번째 형제를 선택합니다.

 

 

자세한 사항은 아래 링크 참조

 

:nth-child() 가상 클래스

 

 

'같은 유형'이란?

 

<div>

<p>내용1</p>

<p>내용2</p>

<h3>내용3</h3>

</div>

 

위의 예에서, p:nth-last-child(2)라고 하면 <p>내용2</p>가 선택됩니다.

마지막에서부터 2번째이며, <p>요소의 요건을 충족하기 때문입니다.

 

p:nth-last-of-type(2)라고 하면 <p>내용1</p>이 선택 됩니다.

<div>자식인 같은 유형의 두번째 형제<p>를 선택해야 하기 때문입니다.

 

 

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

 

▶html/css 작성 예를 보겠습니다.

nth-last-of-type.htm

오늘은 실행 화면부터 먼저 볼게요

 

 

 

우선 이 예제는 목록 태그(ul, li태그)로 번호를 만들고나서, 목록 머리 기호를 보이지 않게 했습니다.ul{list-style:none;}

 

그리고 원을 만드는 법은 li 에 너비와 높이가 같은 사각형을 만든 후, border-radius: 50%를 적용 했습니다.

 

 

html

<h3>:nth-last-of-type 예제 </h3>
<div>
<ul>
<li>&nbsp;1&nbsp;</li>
<li><a href="http://opencast.naver.com/IT741">&nbsp;2&nbsp;</a></li>
<li>&nbsp;3&nbsp;</li>
<li><a href="http://opencast.naver.com/IT741">&nbsp;4&nbsp;</a></li>
<li>&nbsp;5&nbsp;</li>
<li><a href="http://opencast.naver.com/IT741">&nbsp;6&nbsp;</a></li>
<li>&nbsp;7&nbsp;</li>
<li>&nbsp;8&nbsp;</li>
<p>노란색 버튼을 클릭하세요</p>
</ul>
</div>

 

 

css

ul{list-style:none;}
li{display:inline; border:1px solid black; width:20px; height:20px;border-radius:50%;padding:5px;}
li:nth-last-of-type(2n+3){background-color:yellow;}
a{text-decoration:none;} 

 

 

 

 

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

 

text-decoration 속성(none, underline, overline, line-through)

 

list-style 속성 배우기

 

목록을 만드는 ul ol li 태그