빈 요소와 빈 내용을 표시하는 가상 클래스 선택자 :empty와 :blank 기초 이해

:blank 가상 클래스 선택자는 가장 최근에 등장한 빈 요소/내용인 태그를 선택하는 선택자입니다.

최근에 등장한 만큼 :empty 가상 클래스 선택자보다는 조금 더 보강된 기능을 제공합니다.

 

기능적으로는 :empty는 1개 이상의 공백이 있는 태그(요소)나 입력 필드는 비어있지 않은 것으로 인식합니다.

반면 :blank는 공백만 있는 태그 내용, 또는 입력 필드 내용은 빈 것으로 간주합니다.

 

알아둘 중요한 점이 있습니다.

 

글을 쓰는 시점에서 :blank 가상 선택자는 현재 실험 기능으로 정식 명세로 채택되지 않았으며, CSS Level 4 초안으로 제안된 상태입니다.

곧 채택될 예정이지만, 초기에 :empty 가상 선택자를 공백만 있는 요소, 또는 입력 필드를 빈 것으로 인식하도록 명세를 변경하는 것과 :blank 가상 선택자를 새로 도입하는 것에 대한 이견으로 오랜 기간 소모적인 논쟁이 있으면서 표준화가 지연되었습니다.

 

구글 크롬은 95~97버전에서부터 실험실 기능으로 지원될 것으로 예상됩니다.

파이어폭스는 브라우저 전용의 가상 클래스 선택자(:-moz-only-whitespace)를 지원하고 있어 이것으로 테스트를 해볼 수 있습니다.

 

:empty 보다는 :blank가 실제 입력 필드와 태그 체크에서 활용성이 더 높기 때문에 CSS Level 4 명세 확정 이후에는 :blank가 더 많이 사용될 것으로 보입니다.

 

 

먼저 :empty 가상 선택자에 대해서 알아보겠습니다.

 

 

---

 

:empty 가상 선택자

 

공백만 있는 태그, 또는 입력 필드는 내용이 있는 것으로 인식합니다.

 

다음의 5개 문단중 :empty 가상 클래스 선택자로 선택되는 것은 첫 번째와 세 번째 문단 만입니다. 나머지 문단 태그는 공백이나 내용이 있기 때문에 :empty 가상 클래스 선택자로 선택되지 않습니다.

 

<p></p>
<p>문단 내용 있음</p>
<p><!-- "주석 태그 있음 --></p>
<p> <!-- "주석 태그 앞에 공백이 있음 --></p>
<p>
</p>

 

:empty 가상 클래스 선택자로 문단을 선택해 초록색 테두리 표시를 하면 다음처럼 선택됩니다.

 

p:empty{
    border: 3px solid #0a0;
}

 

 

---

 

 

:blank 가상 선택자

 

공백만 있는 태그, 또는 입력 필드의 공백을 무시하고 빈 것으로 인식합니다.

앞의 문단 HTML 예를 :blank 가상 클래스 선택하면 다음처럼 초록색 테두리가 표시됩니다.

 

p:-moz-only-whitespace{ /* firefox 전용 */
    border: 3px solid #0a0;
}
p:blank{
    border: 3px solid #0a0;
}