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:

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *