Selettore discendente di CSS

Il selettore discendente (descendant selector) è anche noto come selettore contenitore.

Il selettore discendente può selezionare elementi che sono discendenti di un elemento specifico.

Selezionare elementi in base al contesto

Possiamo definire regole per il selettore discendente in modo che queste regole funzionino in alcune strutture di documento ma non in altre.

Per esempio, se si desidera applicare lo stile solo agli elementi em all'interno di h1, si può scrivere così:

h1 em {color:red;}

Questa regola cambierà il testo dell'elemento em discendente da h1 in rosso. Altri testi em (come quelli in un paragrafo o in un blocco di citazione) non verranno selezionati da questa regola:

<h1Questo è un <emimportante>intestazione</em></h1>
<pQuesto è un <emimportante>paragrafo.</em></p>

Prova da solo

Naturalmente, è possibile anche aggiungere una proprietà class a ciascun elemento em trovato in h1, ma è ovvio che il selettore discendente è più efficiente.

Spiegazione grammaticale

Nel selettore discendente, il lato sinistro della regola include due o più selettori separati da spazi. Gli spazi tra i selettori sono un combinator. Ogni combinator può essere interpretato come “... trovato in ...”, “... parte di ...”, “... discendente di ...”, ma è necessario leggere il selettore da destra a sinistra.

Quindi, il selettore h1 em può essere interpretato come “ogni elemento em che è discendente di un elemento h1”. Se si legge il selettore da sinistra a destra, si può dire: “Tutti gli h1 che contengono em applicheranno lo stile seguente a tale em”.

Applicazione specifica

Il selettore discendente è estremamente potente. Con esso, è possibile rendere possibili compiti che non possono essere realizzati in HTML.

Supponiamo di avere un documento che contiene una sidebar e una sezione principale. Illo sfondo della sidebar è blu, mentre quello della sezione principale è bianco. Entrambe le aree contengono elenchi di link. Non è possibile impostare tutti i link come blu, altrimenti i link blu nella sidebar non sarebbero visibili.

La soluzione è utilizzare il selettore discendente. In questo caso, è possibile assegnare al div che contiene la sidebar la proprietà class con valore sidebar e impostare la proprietà class del contenuto principale come maincontent. Poi scrivere lo stile seguente:

div.sidebar {background:blue;}
div.maincontent {background:white;}
div.sidebar a:link {color:white;}
div.maincontent a:link {color:blue;}

C'è un aspetto facilmente trascurabile dei selettori discendenti, ovvero la distanza di livello tra due elementi può essere infinita.

Ad esempio, se si scrive ul em, questa sintassi selezionerà tutti gli elementi em derivati dall'elemento ul, indipendentemente dal livello di nesting.

Quindi, ul em selezionerà tutti gli elementi em nei seguenti tag:

<ul>
  <li>Elemento della lista 1</li>
    <ol>
      <li>Elemento della lista 1-1</li>
      <li>Elemento della lista 1-2</li>
      <li>Elemento della lista 1-3</li>
        <ol>
          <li>Elemento della lista 1-3-1</li>
          <li>Elemento della lista</li> <em>1-3-2</em></li>
          <li>Elemento della lista 1-3-3</li>
        </ol>
      </li>
      <li>Elemento della lista 1-4</li>
    </ol>
  </li>
  <li>Elemento della lista 2</li>
  <li>Elemento della lista 3</li>
</ul>

Prova da solo