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

 

 

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

 

 

날씨가 많이 쌀쌀해졌네요.

 

불과 며칠 전에  패딩을 입어야 하나 말아야 하나 고민했는데 이제는 아무렇지 않게

 

걸치고 다닐 수 있는 계절입니다.^^ 모두들 감기 조심하시고요....

 

요즘엔 계속 선택자에 관한 글만 쓰고 있어서, 지루하실 수도 있을 것 같아요.ㅎㅎ

 

전 이렇게 정해진 주제에 따라 글을 쓰는 게 편하긴 해요. 글감을 따로 걱정할 필요가

 

없으니까요.... 그리고, 언제는 써야 할 주제니까요.ㅎ

 

이제 남은 선택자는 서너개 정도예요. 선택자가 끝나고 나면 좀 더 흥미 있을 주제를

 

다루어 볼게요^^

 

오늘 배울 선택자는 :first-of-type 가상 클래스입니다.

 

지난 시간에 배운 :nth-child와 :nth-of-type와 비슷한 부분이 있습니다.

 

아래 링크 참조해 주시고요~

 

:nth-child() 가상 클래스

 

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

 

 

간단히 복습해 볼게요.

 

:nth-child(n)는 부모의 n번째 위치에 있는 자식을 선택합니다

 

:nth-of-type(n)은  같은 유형의 n번째 형제를 선택합니다.

 

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

 

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

 

예.

 

<div>

<h3>제목</h3>

<p>내용1</p>

<p>내용2</p>

</div>

 

p:nth-child(1)은 선택할 대상이 없습니다. 첫번째 자식이 <h3>이기 때문

 

p:nth-of-type(1)은 :first-of-type과 정확히 일치 합니다.

 

div 자식이면서 첫번째 p 형제이므로 <p>내용1</p>를 선택합니다.

 

 

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

first-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>
</div>

 

 

css

body{font: 1em/1.3 verdana, "Times New Roman", sans;}
p:first-of-type{text-indent: 30px;font-weight:bold;color:#CCA63D;}

 

 

▶실행화면

 

첫번째 p 영역에 들여쓰기가 되었고, 굵은 글씨체에 황토색 글자로 적용되었습니다~

 

 

 

 

input type 속성

 

text-indent 속성(들여쓰기)

 

font-weight 속성 (bold, 100~900, bolder, lighter)

 

[html/css] line-height 속성 배우기