Descendant combinator

Esta tradução está em andamento.

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

Especificações

Especificação Status Comment
Selectors Level 4
The definition of 'descendant combinator' in that specification.
Rascunho atual
Selectors Level 3
The definition of 'descendant combinator' in that specification.
Recomendação
CSS Level 2 (Revision 1)
The definition of 'descendant selectors' in that specification.
Recomendação
CSS Level 1
The definition of 'contextual selectors' in that specification.
Recomendação Initial definition

Compatibilidade dos Browser

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Descendant combinator (A B)Chrome Full support 1
Full support 1
Full support 61
Notes
Notes >>> is aliased to this selector since its use as the 'shadow-piercing descendant combinator' was deprecated.
Edge Full support 12Firefox Full support 1IE Full support 3Opera Full support 3.5Safari Full support 1WebView Android Full support ≤37
Full support ≤37
Full support 61
Notes
Notes >>> is aliased to this selector since its use as the 'shadow-piercing descendant combinator' was deprecated.
Chrome Android Full support 18
Full support 18
Full support 61
Notes
Notes >>> is aliased to this selector since its use as the 'shadow-piercing descendant combinator' was deprecated.
Firefox Android Full support 4Opera Android Full support 10.1Safari iOS Full support 1Samsung Internet Android Full support 1.0
Full support 1.0
Full support 8.0
Notes
Notes >>> is aliased to this selector since its use as the 'shadow-piercing descendant combinator' was deprecated.
A >> B syntax
Deprecated
Chrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support 10 — 11.1WebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support 10 — 11.3Samsung Internet Android No support No

Legend

Full support  
Full support
No support  
No support
Deprecated. Not for use in new websites.
Deprecated. Not for use in new websites.
See implementation notes.
See implementation notes.

Veja também