Selectors de descendents

Sumari

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

El combinador descendent és tècnicament un o més caràcters d'espais en blanc CSS - el caràcter d'espai 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

li {
  list-style-type: disc;
}

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

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

Especificacions

Navegadors compatibles