Errore comune dei principianti con il selettore di discendenti

Osservate il seguente selettore:

p.eee {
	color: red;
}

Dovreste già sapere che un tale selettore selezionerà i paragrafi con la classe eee. Ad esempio, questi:

<p class="eee">
	lorem ipsum
</p>
<p class="eee">
	lorem ipsum
</p>

Ora osservate questo selettore:

p .eee {
	color: green;
}

Questo selettore differisce dal precedente per il fatto che tra il nome del tag e il nome della classe c'è uno spazio. Questo spazio rappresenta il selettore di discendenti. Cioè in questo caso stiamo selezionando tutti gli elementi con la classe eee, che si trovano all'interno dei paragrafi. Ad esempio, questo selettore selezionerà i seguenti span:

<p>
	lorem <span class="eee">ipsum</span>
</p>
<p>
	lorem <span class="eee">ipsum</span>
</p>

Risultato dell'esecuzione del codice:

Quindi, ancora una volta: p.eee - un tale selettore seleziona i paragrafi con la classe eee. Ma se faccio così: p .eee, allora seleziono tutti gli elementi con la classe eee, che si trovano all'interno dei paragrafi. Cercate di percepire questa differenza.

Spiegate cosa seleziona il selettore nel codice riportato qui sotto. Poi scrivete il codice HTML adatto a questo selettore. Ecco il codice con il selettore:

p.bbb {
	color: red;
}

Spiegate cosa seleziona il selettore nel codice riportato qui sotto. Poi scrivete il codice HTML adatto a questo selettore. Ecco il codice con il selettore:

p .bbb {
	color: red;
}

Spiegate cosa seleziona il selettore nel codice riportato qui sotto. Poi scrivete il codice HTML adatto a questo selettore. Ecco il codice con il selettore:

.eee p.bbb {
	color: red;
}

Spiegate cosa seleziona il selettore nel codice riportato qui sotto. Poi scrivete il codice HTML adatto a questo selettore. Ecco il codice con il selettore:

.eee p .bbb {
	color: red;
}