From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../pt-br/web/css/descendant_combinator/index.html | 108 +++++++++++++++++++++ 1 file changed, 108 insertions(+) create mode 100644 files/pt-br/web/css/descendant_combinator/index.html (limited to 'files/pt-br/web/css/descendant_combinator') diff --git a/files/pt-br/web/css/descendant_combinator/index.html b/files/pt-br/web/css/descendant_combinator/index.html new file mode 100644 index 0000000000..f77d910101 --- /dev/null +++ b/files/pt-br/web/css/descendant_combinator/index.html @@ -0,0 +1,108 @@ +--- +title: Descendant combinator +slug: Web/CSS/Descendant_combinator +tags: + - CSS + - Reference + - Selectors +translation_of: Web/CSS/Descendant_combinator +--- +
{{CSSRef("Selectors")}}
+ +

O combinador descendente - normalmente representado por um caractere de espaço simples ( ) - 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. Os seletores que utilizam um combinador descendente são chamados de seletores descendentes.

+ +
/* Listar itens descendentes da lista "my-things" */
+ul.my-things li {
+  margin: 2em;
+}
+ +

O combinador descendente é tecnicamente um ou mais caracteres de espaço em branco do {{Glossary ("CSS")}} - o caractere de espaço e/ou um dos quatro caracteres de controle:  retorno de carro (carriage return), Quebra de página ( form feed), nova linha e caracteres de tabulação — entre dois seletores na ausência de outro combinador.  Além disso, os caracteres de espaço em branco dos quais o combinador é composto podem conter qualquer número de comentários CSS.

+ +

Sintaxe

+ +
selector1 selector2 {
+  /*  declarações de propriedade  */
+}
+ +

Exemplo

+ +

CSS

+ +
li {
+  list-style-type: disc;
+}
+
+li li {
+  list-style-type: circle;
+}
+
+ +

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>
+
+ +

Resultado

+ +

{{EmbedLiveSample("Example", "100%", 160)}}

+ +

Especificações

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
EspecificaçãoStatusComment
{{SpecName("CSS4 Selectors", "#descendant-combinators", "descendant combinator")}}{{Spec2("CSS4 Selectors")}}
{{SpecName("CSS3 Selectors", "#descendant-combinators", "descendant combinator")}}{{Spec2("CSS3 Selectors")}}
{{SpecName("CSS2.1", "selector.html#descendant-selectors", "descendant selectors")}}{{Spec2("CSS2.1")}}
{{SpecName("CSS1", "#contextual-selectors", "contextual selectors")}}{{Spec2("CSS1")}}Initial definition
+ +

Compatibilidade dos Browser

+ + + +

{{Compat("css.selectors.descendant")}}

+ +

Veja também

+ + -- cgit v1.2.3-54-g00ecf