A pseudo-classe CSS :empty representa qualquer elemento que não tenha filhos. Aqui, filhos podem ser 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;
}
<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>
body {
display: flex;
justify-content: space-around;
}
.box {
background: pink;
height: 80px;
width: 80px;
}
.box:empty {
background: lime;
}
{{EmbedLiveSample('Examples', 300, 80)}}
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.
| Specification | Status | Comment |
|---|---|---|
| {{ SpecName('CSS4 Selectors', '#empty-pseudo', ':empty') }} | {{ Spec2('CSS4 Selectors') }} | No change |
| {{ SpecName('CSS3 Selectors', '#empty-pseudo', ':empty') }} | {{ Spec2('CSS3 Selectors') }} | Initial definition |
{{Compat("css.selectors.empty")}}