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

 

 

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

 

어젠 :first-of-type 선택자를 배웠습니다.

 

:first-of-type 가상 클래스

 

:first-of-type은 같은 유형의 첫번째 형제를 선택합니다.

 

:last-of-type은 같은 유형의 맨 마지막 형제를 선택 합니다.

 

 

 

 

:nth-last-of-type(1)와 정확히 일치 합니다.

 

:nth-last-of-type 가상 클래스

 

:nth-last-of-type(n)은 마지막부터 계산하여 같은 유형의 n번째 형제를 선택하는 선택자.

 

 

예:

 

<div>

<p>내용1</p>

<p>내용2</p>

<a href="#">메뉴로 가기</a>

</div>

 

 

p:last-of-type{color: red;} 혹은 p:nth-last-of-type(1){color:red;}라고 하면

 

<p>내용2</p>가 빨간색 글씨로 표시 됩니다.

 

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

last-of-type.htm

 

html

<div>
<h3>Chapter 1</h3>
<p>Alice was beginning to get very tired of sitting by her sister on the bank,
and of having nothing to do: once or twice she had peeped into the book her sister was reading,
 but it had no pictures or conversations in it, `and what is the use of a book,
' thought Alice `without pictures or conversation?</p>
<p>So she was considering in her own mind (as well as she could, for the hot day made her feel very sleepy and stupid),
whether the pleasure of making a daisy-chain would be worth the trouble of getting up and picking the daisies,
when suddenly a White Rabbit with pink eyes ran close by her. </p>
<p>to be continued...</p>
<a href="http://www.gutenberg.org/files/11/11-h/11-h.htm">목차 보러 가기</a>
</div>

 

 

 

css

p:last-of-type{text-align: center; font-style:ltalic; color:#CCA63D;}

 

▶실행화면

 

html에서  'to be continued...' 부분을 중앙 정렬하고, 글씨체를 이탤릭체, 황토색 글자로 표시했습니다.

 

맨 마지막 <p>태그에 클래스로 묶어 스타일을 주어도 되겠지만, :last-of-type 선택자를 사용해도

 

같은 효과를 줄 수 있습니다.

 

 

 

 

 

text-align 속성으로 정렬하기 (left, right, center, justify)

 

font-style 속성 (normal, italic, oblique 차이)

 

글꼴을 지정하는 font 속성 배우기

 

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