Discendente

Il selettore Discendente in CSS è un qualsiasi selettore che si compone di spazi bianchi inseriti tra altri due selettori senza un combinatore. Ecco alcuni esempi del selettore di discendenza:

ul li { }
ul li a { }
header .nav { }
.article h1 { }
content p { }
div figure img { }

Descriviamo il primo esempio ul li { }. Questo indica a CSS di selezionare ogni elemento li che è discendente di una lista non ordinata.

Discendente può voler dire in qualsiasi punto all’interno del documento. Potrebbe essere un discendente diretto oppure essere un discendente dopo 3 livelli, rimane comunque un discendente. Questo selettore agisce diversamente dal Combinatore Child (>), che seleziona solamente i discendenti diretti, ovvero al livello immediatamente successivo rispetto all’elemento specificato.

Illustriamo graficamente come agirebbe il nostro esempio:

<ul>
  <li>Questo elemento verrebbe selezionato</li>
  <ul>
    <li>Anche questo elemento</li>
    <ul>
      <li>Così come questo elemento qui</li>
    </ul
  </ul>
</ul>