[css3] :empty 가상 클래스

 

 

[css3] :empty 가상 클래스

 

:empty 가상 클래스는 자식이 전혀 없는 요소에 적용하는 선택자입니다.

 

요소 안에 주석이 있어도 가능합니다.

 

하지만, 공백이 있으면 적용되지 않음.

 

 

html

<p></p>

<p><!-- test --></p>

 

p:empty{color: red;}  => 적용 가능

 

 

 

html

<p> </p>

 

p:empty{color: red;} => 적용 안 됨(공백이 있으므로 비어이지 않음)

 

 

html

<div>
  <!-- test -->
</div>

 

div:empty{clear:both;} => 적용 안 됨. 줄바꿈으로 인해 공백 문자가 포함돼 있음 

 

html

<div>bar</div>

 

div:empty{clear:both;} => 적용 안 됨. 문자가 포함돼 있음 

 

 

 

 

 

 

종류가 구조적 가상 클래스라고 되어 있는데

 

 

구조적 가상 클래스 Structural pseudo-classes란?

 

css 선택자는 구조적 가상 클래스란 개념을 도입하는데,

 

문서 구조 내에 있지만, 다른 선택자나 조합자로 선택할 수 없는 정보에 기초하여

 

선택을 가능하게 하는 선택자입니다. :first-child 와 :last-child 또한 구조적 가상 클래스 종류입니다.

  

:first-child, :last-child 선택자

 

 :empty 가상 클래스 용도는?

 

테이블 에서 빈 셀만 선택해서 스타일을 다르게 적용

 

p 요소에서 비어 있는 p만 선택해서 스타일을 다르게 적용하고자 할 때

 

 

 

:empty 브라우저 지원 정보

ie 9+, chrome, safari 3.1+, firefx 1.5+, opera 9.5+

 

 

실제 적용 사례를 보겠습니다~

empty.htm

 

3 X 3의 표를 만들어 빈 셀에만 배경색을 노란색으로 적용해 보겠습니다.

 

 

html

<p>Q. 빈칸을 채우시오</p>

<table>
<tr>
<td>1</td>
<td>9</td>
<td>3</td>
</tr>
<tr>
<td></td>
<td>2</td>
<td>8</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
<td>7</td>
</tr>
</table>

<p>A._________  </p>

 

 

 

css

table {width:200px; height:200px;text-align:center;}
table, td{border:1px solid black;}
td:empty{background-color:yellow;}
 

 

▶ 실행화면

 

 

 

[css3] :not 선택자

 

[css] 인접 형제 선택자, 일반 형제 선택자 차이

 

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

 

table 태그, tr 태그, th 태그, td 태그와 table 속성 정리

 

[참조 사이트]

 

http://css-tricks.com/almanac/selectors/e/empty/

http://webdesignernotebook.com/css/a-quick-note-about-the-empty-pseudo-class/

http://www.w3.org/TR/selectors/#structural-pseudos