Esta tradução está incompleta. Por favor, ajude a traduzir este artigo.

A pseudo-classe CSS :empty representa qualquer elemento que não tenha filhos. Aqui, filhos podem ser ou outros elementos ou blocos de texto (incluindo espaços em branco). Comentários e instruções de processamento não são considerados ao se determinar se um elemento é vazio.

/* Seleciona qualquer <div> que não tenha conteúdo */
div:empty {
  background: lime;
}

Sintaxe

:empty

Exemplos

HTML

<div class="box"><!-- Eu serei verde. --></div>
<div class="box">Eu serei rosa.</div>
<div class="box">
    <!-- Eu serei rosa por causa do espaço em branco em volta desse comantário -->
</div>

CSS

.box {
  background: pink;
  height: 80px;
  width: 80px;
}

.box:empty {
  background: lime;
}

Resultado

Questões de acessibilidade

Tecnologias assistivas como leitores de tela não conseguem identificar e processar conteúdos interativos que estejam vazios. Todo conteúdo interativo deve ter um nome acessível, que é criado ao fornecer um valor de texto para o elemento pai do controle interativo (âncoras, botões, etc.). Nomes acessíveis expõem o controle interativo à árvore de acessibilidade, uma API que comunica informações importantes úteis para tecnologias assistivas.

The text that provides the interactive control's accessible name can be hidden using a combination of properties that remove it visually from the screen but keep it parseable by assistive technology. This is commonly used for buttons that rely solely on an icon to convey purpose.

Specifications

Specification Status Comment
Selectors Level 4
The definition of ':empty' in that specification.
Rascunho atual No change
Selectors Level 3
The definition of ':empty' in that specification.
Recomendação Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 1Edge Full support YesFirefox Full support 1
Notes Alternate Name
Full support 1
Notes Alternate Name
Notes See bug 1106296.
Alternate Name Uses the non-standard name: :-moz-only-whitespace
IE Full support 9Opera Full support 9.5Safari Full support 3.1WebView Android Full support 2Chrome Android ? Edge Mobile Full support YesFirefox Android Full support 4
Notes Alternate Name
Full support 4
Notes Alternate Name
Notes See bug 1106296.
Alternate Name Uses the non-standard name: :-moz-only-whitespace
Opera Android Full support 10Safari iOS Full support 3.1Samsung Internet Android ?

Legend

Full support  
Full support
Compatibility unknown  
Compatibility unknown
See implementation notes.
See implementation notes.
Uses a non-standard name.
Uses a non-standard name.

Etiquetas do documento e colaboradores

Colaboradores desta página: liddack
Última atualização por: liddack,