[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번째 형제를 선택하는 선택자.








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




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


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


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




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





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 선택자, 선택자 종류와 사용법


css 2014.11.18 09:30
Powerd by Tistory, designed by criuce