Un concetto importante da tenere in considerazione prima di analizzare i vari tipi di selettori css è l’ereditarietà delle regole di stile.

Se difatti si applica uno stile ad un elemento questo sarà ereditato anche dagli elementi contenuti al suo interno, a condizione che l’elemento interno non abbia anch’esso una dichiarazione di stile.
Definire ad esempio un paragrafo con un particolare stile ed annidare al suo interno uno span senza regole, fa si che lo span acquisisca le regole di stile del suo padre.

p {
	font-size : 20px;
	color : red;
}

Scrivere poi nel codice html:

<p>
	Questo paragrafo ha uno stile ad esso applicato. Gli elementi interni ereditano 	lo stesso stile.
	<span>Come questo span!</span>
</p>

Produrrà il seguente risultato:

Quindi in definitiva è importante sapere che le proprietà di uno stile di un livello figlio sono ereditate dallo stile del livello genitore.

Il selettore

Fondamentalmente una regola CSS viene applicata ad un selettore.
La parola parla da sé: si tratta di una semplice dichiarazione che serve a selezionare la parte o le parti di un documento soggette ad una specifica regola.

Vedremo come sarà possibile identificare un selettore, raggrupparli e gestire la loro nidificazione. Inoltre applicare stili differenti ai selettori in base alla loro parentela nell’albero strutturale di un documento html.

Il selettore generale

Il selettore generale, indicato con asterisco (*), corrisponde a qualsiasi elemento nella pagina html.

Scrivere ad esempio:

* {
	font-size : 20px;
	color : red;
}

Tutti gli elementi della pagina, sia che si tratti di titoli, paragrafi, div o altri contenitori, avranno come colore del testo rosso e grandezza di 20px.

Il selettore di elementi

E’ il tipo di selettore più utilizzato, ed è quello già visto più volte all’inizio di questa lezione.
E’ anche il più semplice dei selettori, infatti è costituito da uno qualsiasi degli elementi HTML.

Un esempio di foglio di stile che utilizzi i selettori di elementi è il seguente:

body {
	font-size : 12px;
	background-color : grey;
}

h1 {
	color: red;
}

p {
	border : 1px solid white;
	padding : 5px;
}

Lo sviluppatore di CSS utilizzando questi tipi di selettori può definire regole di stile per ciascun tag html che compone le proprie pagine.
Nell’esempio, vengono definite le dichiarazioni per il body, i titoli h1 e i paragrafi. Il vantaggio nell’uso di questi selettori è la velocità con la quale è possibile definire lo stile di di intere pagine html con poche linee di codice.
Uno degli svantaggi però nasce con la nidificazione degli elementi. Infatti maggiore sarà il livello di nidificazione e maggiore sarà la probabilità che le diverse regole si sovrascrivano tra loro.

[… vai alla seconda parte …]