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

 

 

[css3] :only-child, :only-of-type 가상 클래스

 

오늘은 :only-child 선택자와, :only-of-type 선택자를 비교해서 배워 보겠습니다.

 

오늘을 끝으로 css3 선택자는 모두 다루었고요, 다음 시간엔 그간 배운 css1~3을 총정리 형태로

 

요약해 보겠습니다.

 

 

:only-child 가상 클래스

 

:only-child는 어떤 요소의 자식이 하나밖에 없을 때 적용 합니다.

 

 

 

예 ①

 

<div>

  <p>내용</p>

</div>

 

p:only-child{color: red;} 

내용이 빨간색으로 표시 됨

 

예 ②

 

<div>

  <h1>제목</h1> 

  <p>내용</p> 

</div>

 

h1:only-child{color: red;} 

자식이 h1, p가 있으므로 적용되지 않음

 

예 ③

 

<div id="wrapper">

  <div id="header">

     <p>내용</p>

  </div>

</div>

 

#wrapper  #header:only-child{color:red;} 

div 안에 div 에 p요소 하나 밖에 없으므로 빨간색으로 표시됨

 

 

only-of-type 가상 클래스

 

:only-of-type 선택자는 같은 유형의 형제가 없을 때 적용합니다.

 

예 ①

 

<div>

  <b>내용</b>

</div>

 

b:only-of-type{color: red;} 

내용이 빨간색으로 표시 됨

 

예 ②

 

<div>

  <span>내용1</span>

  <span>내용2</bspan

</div>

 

span:only-of-type{color: red;} 

형제가 있으므로 적용되지 않음

 

예 ③

 

<div>

  <h1>제목</h1>

  <p>내용</p>

</div>

 

p:only-of-type{color: red;} 

p요소는 유일하므로 빨간색 글씨로 표시 됨

 

▶:only-child :only-of-type 브라우저 지원: ie9.0+, chrome 4.0+, firefox 3.5+, safari 3.2+

 

▶html/css 작성 예 입니다

only-child only-of-type.htm

 

 

html

<div>
<h3>:only-child 선택자</h3>
<p>:only-child는 자식이 하나밖에 없는 요소에 적용한다</p>
</div>

 

<div>
<h3>:only-of-type 선택자</h3>
<p>:only-of-type은 같은 형제가 없을 경우 적용한다. </p>
</div>

 

 

 

css

div{width:300px; border:1px solid black;margin:10px; padding:10px;box-shadow: 10px 10px 20px grey ; }
p:only-child{background-color:yellow;}
p:only-of-type{background-color:yellow;}

 

 

▶실행 화면

 

div 안에 모두 자식이 둘 있으므로, :only-child 로 지정한 부분은 적용되지 않았습니다.

 

형제가 없는 p 요소는 노란색 배경으로 적용 되었습니다.

 

 

 

 

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

 

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

 

[css2/3] 속성 선택자

 

브라우저 업체별 접두어(vendor prefix)