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

 

 

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

 

지난 시간에 :nth-child() 가상 클래스를 배웠습니다.

 

 :nth-child() 가상 클래스는 부모의 n번째 자식인 요소를 선택하는 선택자입니다.

 

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

 

 

 

n값에는  :nth-of-type 가상 클래스 에서 배운 것처럼 동일 합니다.

 

키워드, 정수, 공식(an+b 같은)이 들어갈 수 있습니다.

 

1. 키워드 - even은 짝수값, odd는 홀수값

  

2. 정수- 양수, 음수, 또는 0 

 

3. 공식 (예: an+b)

 

▶브라우저 지원: ie 9.0+, chrome 4.0+, firefox 3.5+, safari 3.2+, opera 9.6+

 

 

:nth-child와 :nth-of-type 가상 클래스는 때때로 비슷해 보이지만

 

:nth-of-type이 좀 더 구체적인 선택자랄 수 있습니다.

 

 

둘의 차이를 정리하자면

 

E:nth-child(n)
 부모의 n번째 자식이면서,  E 요소일 때

 

E:nth-of-tyep(n)
같은 유형의 n번째 형제인 E 요소

 

 

▶예

 

<div>

<h3>어린 왕자</h3>

<p>1장 </p>

<p>2장 </p>

</div>

 

p:nth-child(2) {color:red;} 라고 하면 <p>1장 </p>이 빨간색으로 표시 됩니다.

 

div의 두번째 자식이자 p요소의 요건에 맞기 때문입니다.

 

p:nth-of-type(2) {color:red;}일 경우 <p>2장 </p>가 빨간색으로 표시 됩니다.

 

div의 자식이면서 같은 유형 두번째 p이어야 하기 때문입니다.

 

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

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

p:nth-of-type(2){color:red;}

 

▶실행화면 

 

 

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

 

form 태그(html 양식 만들기)

 

html] input type 속성

 

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

 

[css] rgba, opacity 차이