1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
|
---
title: ':empty'
slug: 'Web/CSS/:empty'
translation_of: 'Web/CSS/:empty'
---
<div>{{ CSSRef() }}</div>
<p>A <a href="/pt-BR/docs/Web/CSS/Pseudo-classes">pseudo-classe</a> <a href="/pt-BR/docs/Web/CSS">CSS</a> <strong><code>:empty</code></strong> 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.</p>
<pre class="brush: css no-line-numbers">/* Seleciona qualquer <div> que não tenha conteúdo */
div:empty {
background: lime;
}</pre>
<h2 id="Syntax" name="Syntax">Sintaxe</h2>
{{csssyntax}}
<h2 id="Examples" name="Examples">Exemplos</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: 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></pre>
<h3 id="CSS">CSS</h3>
<div class="hidden">
<pre class="brush: css">body {
display: flex;
justify-content: space-around;
}</pre>
</div>
<pre class="brush: css">.box {
background: pink;
height: 80px;
width: 80px;
}
.box:empty {
background: lime;
}</pre>
<h3 id="Resultado">Resultado</h3>
<p>{{EmbedLiveSample('Examples', 300, 80)}}</p>
<h2 id="Questões_de_acessibilidade">Questões de acessibilidade</h2>
<p>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 (<a href="/pt-BR/docs/Web/HTML/Element/a">âncoras</a>, <a href="/pt-BR/docs/Web/HTML/Element/button">botões</a>, etc.). Nomes acessíveis expõem o controle interativo à <a href="/en-US/docs/Learn/Accessibility/What_is_accessibility#Accessibility_APIs">árvore de acessibilidade</a>, uma API que comunica informações importantes úteis para tecnologias assistivas.</p>
<p>The text that provides the interactive control's accessible name can be hidden using <a href="https://gomakethings.com/hidden-content-for-better-a11y/#hiding-the-link" rel="noopener">a combination of properties</a> 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.</p>
<ul>
<li><a href="https://developer.paciellogroup.com/blog/2017/04/what-is-an-accessible-name/" rel="noopener">What is an accessible name? | The Paciello Group</a></li>
<li><a href="https://gomakethings.com/hidden-content-for-better-a11y/">Hidden content for better a11y | Go Make Things</a></li>
<li><a href="https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Operable#Guideline_2.4_%E2%80%94_Navigable_Provide_ways_to_help_users_navigate_find_content_and_determine_where_they_are">MDN Understanding WCAG, Guideline 2.4 explanations</a></li>
<li><a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/navigation-mechanisms-refs.html">Understanding Success Criterion 2.4.4 | W3C Understanding WCAG 2.0</a></li>
</ul>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">Specification</th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS4 Selectors', '#empty-pseudo', ':empty') }}</td>
<td>{{ Spec2('CSS4 Selectors') }}</td>
<td>No change</td>
</tr>
<tr>
<td>{{ SpecName('CSS3 Selectors', '#empty-pseudo', ':empty') }}</td>
<td>{{ Spec2('CSS3 Selectors') }}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility">Compatibilidade com navegadores</h2>
<div>
<p>{{Compat("css.selectors.empty")}}</p>
</div>
|
