Selectors de descendents

El combinador descendent - en general representat per un  únic caràcter d'espai ( ) - combina dos selectors de tal manera que els elements que coincideixen amb el segon selector se seleccionen si tenen un element ancestral que coincideixi amb el primer selector. Els selectors que utilitzen un combinador descendent s'anomenen selectors de descendents.

/* Llista els elemenst que són descendsnts de la llista "my-things" */
ul.my-things li {
  margin: 2em;
}

El combinador descendent és tècnicament un o més caràcters d'espais en blanc CSS - el caràcter d'espai en blanc i/o un dels quatre caràcters de control: retorn de carro, avanç de pàgina, nova línia i caràcters de tabulació - entre dos selectors en absència d'un altre combinador. A més, els caràcters d'espai en blanc de les que es compon el combinador poden contenir qualsevol nombre de comentaris CSS.

La naturalesa abstracta d'aquest combinador el fa diferent dels altres combinadors estandarditzats ja que aquests combinadors estan representats per una seqüència de caràcters finits diferents. Aquesta inconsistència es va tractar afegint un combinador descendent redundant representat per dos caràcters, més gran que  (>>), amb seqüència, donant-li una forma que és particularment similar a la del combinador fill, que comparteix una funció similar.

Sintaxi

selector1 selector2 { /* property declarations */ }

selector1 >> selector2 { /* property declarations */ }

Exemple

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>

Resultat

Navegadors compatibles

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!