[selector] CSS - :empty 가상선택자 - 자식/내용 없는 텅 빈 요소 선택 (= :empty선택자 = 엠프티 선택자)

목차

1. :empty 예제 - 텅 빈 <p>요소만 배경색 지정
2. :empty 정의
3. :empty 구문
4. :empty 예제 - 텅 빈 <td> 요소 테두리 제거
5. $nbsp; 포함 요소 경우, JS 이용 필요

:empty 예제 - 텅 빈 <p>요소만 배경색 지정

 

<style> 

p {width:200px; height:20px; background:yellow;}    

p:empty {background: red;}

</style>

<p></p>

<p> </p>

<p>&nbsp;</p>

<p>홈짱닷컴</p>

<p>Homzzang.com</p>

 

결과보기

:empty 정의

 

(태그, text노드, 공백, &nbsp;) 등의 자식이 전혀 없는 요소 선택.

 

---

 

1.

CSS3

 

2.

IE9 이상 주요 최신 브라우저 모두 지원

 

:empty 구문

 

:empty { ... }

 

:empty 예제 - 텅 빈 <td> 요소 테두리 제거

 

<style>

td {

  border:1px solid;

  padding:20px;

}

 td:empty {

  border: none;

}

</style>

  

<table>

  <tr>

    <td>홈짱닷컴</td>

    <td>Homzzang.com</td>

    <td></td>

  </tr>

</table>

 

결과보기

$nbsp; 포함 요소 경우, JS 이용 필요

 

<style> 

p {width:200px; height:20px; background:yellow;}

</style>

<script src="https://code.jquery.com/jquery-latest.js"></script>

<script>

$(document).ready(function(){

    $('p:contains(\u00a0)').css("background-color", "red");

});

</script>

<p></p>

<p> </p>

<p>&nbsp;</p>

<p>홈짱닷컴</p>

<p>Homzzang.com</p>

 

결과보기

PS. 주의: contains() 매개변수에 &nbsp; 넣으면 작동 안 함.