Combinatori CSS: differenza tra “>” e “spazio”

Qual è la differenza tra l'utilizzo di .container div e .container > div ?

Nel primo esempio viene utilizzato il combinatore ␣ (spazio bianco), chiamato descendant (discendente), mentre nel secondo esempio, il combinatore è > che prende il nome di child (figlio).

Il combinatore ␣ ha effetto su tutti gli elementi specificati nel secondo selettore che hanno come elemento genitore quello specificato nel primo selettore. Ma vediamo con un esempio:

Dato questo CSS:

.container div {
    background-color: red;
}

e questo frammento di codice HTML:

<div class="container">
    <section>
        <div>Questo testo avrà sfondo rosso</div>
    </section>
    <div>Anche questo testo avrà sfondo rosso</div>
</div>

Qui entrambe le div avranno all'interno un testo con sfondo rosso, nonostante la prima si all'interno di un tag section. Ma se proviamo a sostituire lo spazio con > nel nostro CSS:

.container > div {
    background-color: red;
}

Il risultato ottenuto sarà il seguente:

<div class="container">
    <section>
        <div>Questo testo NON avrà sfondo rosso</div>
    </section>
    <div>Solo questo testo avrà sfondo rosso</div>
</div>

In questo caso invece, la prima div all'interno di un ulteriore tag non sarà selezionata perché è nipote di .container e non figlia.

Quindi capiamo che > ha effetto solo sugli elementi specificati nel secondo selettore che hanno come genitore l'elemento specificato nel primo selettore, a patto che non ci siano altri elementi tra loro.

Ecco i due combinatori in azione: