Descendant combinator

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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.

css

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

css

li {
  list-style-type: disc;
}

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

HTML

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

Specification
Selectors Level 4 # descendant-combinators

Compatibilidade com navegadores

BCD tables only load in the browser

Veja também

Child combinator