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
96
97
98
99
100
101
102
103
104
105
106
107
108
|
---
title: Descendant combinator
slug: Web/CSS/Descendant_combinator
tags:
- CSS
- Reference
- Selectors
translation_of: Web/CSS/Descendant_combinator
---
<div>{{CSSRef("Selectors")}}</div>
<p><span class="tlid-translation translation" lang="pt"><span title="">O <strong>combinador descendente</strong> - normalmente representado por um caractere de espaço simples </span></span>(<code> </code>)<span class="tlid-translation translation" lang="pt"><span title=""> - combina dois seletores para que os elementos correspondidos pelo segundo seletor sejam selecionados se eles tiverem um elemento ancestral (pai, pai ou mãe, pai ou mãe, etc.) correspondente ao primeiro seletor.</span> <span title="">Os seletores que utilizam um combinador descendente são chamados de seletores descendentes.</span></span></p>
<pre class="brush: css no-line-numbers">/* <span class="tlid-translation translation" lang="pt"><span title="">Listar itens descendentes da lista</span></span> "my-things" */
ul.my-things li {
margin: 2em;
}</pre>
<p><span class="tlid-translation translation" lang="pt"><span title="">O combinador descendente é tecnicamente um ou mais caracteres de espaço em branco do {{Glossary ("CSS")}} -</span></span> <span class="tlid-translation translation" lang="pt"><span title="">o caractere de espaço e/ou um dos quatro caracteres de controle: </span></span> <span class="tlid-translation translation" lang="pt"><span title="">retorno de carro (</span></span>carriage return<span class="tlid-translation translation" lang="pt"><span title="">), </span></span> <span>Quebra de página</span> ( form feed)<span class="tlid-translation translation" lang="pt"><span title="">, nova linha e caracteres de tabulação </span></span>— <span class="tlid-translation translation" lang="pt"><span title="">entre dois seletores na ausência de outro combinador. </span></span> <span class="tlid-translation translation" lang="pt"><span title="">Além disso, os caracteres de espaço em branco dos quais o combinador é composto podem conter qualquer número de comentários CSS.</span></span></p>
<h2 id="Sintaxe"><span class="tlid-translation translation" lang="pt"><span title="">Sintaxe</span></span></h2>
<pre class="syntaxbox"><var>selector1</var> <var>selector2</var> {
<var>/* </var> <span class="tlid-translation translation" lang="pt"><span title="">declarações de propriedade</span></span> <var> */</var>
}</pre>
<h2 id="Exemplo"><span class="tlid-translation translation" lang="pt"><span title="">Exemplo</span></span></h2>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">li {
list-style-type: disc;
}
li li {
list-style-type: circle;
}
</pre>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><ul>
<li>
<div>Item 1</div>
<ul>
<li>Subitem A</li>
<li>Subitem B</li>
</ul>
</li>
<li>
<div>Item 2</div>
<ul>
<li>Subitem A</li>
<li>Subitem B</li>
</ul>
</li>
</ul>
</pre>
<h3 id="Resultado"><span class="tlid-translation translation" lang="pt"><span title="">Resultado</span></span></h3>
<p>{{EmbedLiveSample("Example", "100%", 160)}}</p>
<h2 id="Especificações"><span class="tlid-translation translation" lang="pt"><span title="">Especificações</span></span></h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col"><span class="tlid-translation translation" lang="pt"><span title="">Especificação</span></span></th>
<th scope="col">Status</th>
<th scope="col">Comment</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName("CSS4 Selectors", "#descendant-combinators", "descendant combinator")}}</td>
<td>{{Spec2("CSS4 Selectors")}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName("CSS3 Selectors", "#descendant-combinators", "descendant combinator")}}</td>
<td>{{Spec2("CSS3 Selectors")}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName("CSS2.1", "selector.html#descendant-selectors", "descendant selectors")}}</td>
<td>{{Spec2("CSS2.1")}}</td>
<td></td>
</tr>
<tr>
<td>{{SpecName("CSS1", "#contextual-selectors", "contextual selectors")}}</td>
<td>{{Spec2("CSS1")}}</td>
<td>Initial definition</td>
</tr>
</tbody>
</table>
<h2 id="Compatibilidade_dos_Browser"><span class="tlid-translation translation" lang="pt"><span title="">Compatibilidade dos </span></span>Browser<span class="tlid-translation translation" lang="pt"><span title=""> </span></span></h2>
<p>{{Compat("css.selectors.descendant")}}</p>
<h2 id="Veja_também"><span class="tlid-translation translation" lang="pt"><span title="">Veja também</span></span></h2>
<ul>
<li><a href="/en-US/docs/Web/CSS/Child_combinator">Child combinator</a></li>
</ul>
|
