본문 바로가기
css

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

by 지구별에 2014. 11. 12.
반응형

 

 

[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 차이

 

 

반응형

'css' 카테고리의 다른 글

[css3] :nth-last-of-type 가상 클래스  (0) 2014.11.14
[css3] :nth-last-child 가상 클래스  (0) 2014.11.13
[css3] :nth-of-type() 가상 클래스  (3) 2014.11.12
[css3] :nth-child() 가상 클래스  (1) 2014.11.11
[css3] :root 가상 클래스  (0) 2014.11.10
[css2] :lang 가상 클래스  (0) 2014.11.07

댓글3

  • 황조롱이 2015.06.15 02:03

    시원하게 긁어주시네요....
    nth-child 와 nth-of-type 차이를 아무리 검색해도 한글은 없고, 영어만...
    대충 부모가 있고 없고 차이 같기도 하고..뭐 그렇게 개념잡고 끝내려고 했는데,
    여기에서 제대로 알고 갑니다..

    좋은 글 감사해요
    답글

  • 걱정하지않는자 2021.01.16 13:55

    꿀정보 감사합니다!
    답글