Discendente - Trucchi CSS | CSS Almanac 2025

Un selettore discendente in CSS è qualsiasi selettore con uno spazio bianco tra due selettori senza un combinatore. Alcuni esempi:

ul li ( ) header h2 ( ) footer a ( ) .module div ( ) #info-toggle span ( ) div dl dt a ( )

Prendiamo ul li ( )ad esempio. Significa "qualsiasi elemento dell'elenco che discende da un elenco non ordinato".

Discendente significa dovunque annidato al suo interno nell'albero DOM. Potrebbe essere un bambino diretto, potrebbe essere profondo cinque livelli, è ancora un discendente. Questo è diverso da un combinatore figlio (>) che richiede che l'elemento sia il successivo livello annidato inferiore.

Per illustrare, div span ( )corrisponderà:

 I will match

I will match too

Probabilmente non dovresti preoccupartene molto, ma il selettore deceduto è piuttosto "costoso" - il che significa difficile / lento per i motori di rendering da capire e fare cose con. MDN:

Il selettore discendente è il selettore più costoso in CSS. È terribilmente costoso, soprattutto se il selettore si trova nel tag o nella categoria universale.

Ma solo rispetto ad altri selettori. È ancora incredibilmente veloce e probabilmente non lo noterai mai a meno che non impazzisci.