Selettore id di CSS

Selettore ID

Il selettore ID può assegnare uno stile specifico agli elementi HTML etichettati con un ID specifico.

Il selettore ID è definito con "#".

Nelle due selettori ID seguenti, il primo definisce il colore dell'elemento come rosso, il secondo definisce il colore dell'elemento come verde:

#red {color:red;}
#green {color:green;}

Nell'esempio di codice HTML seguente, l'elemento p con attributo id 'red' viene visualizzato in rosso, mentre l'elemento p con attributo id 'green' viene visualizzato in verde.

<p id="red">Questo paragrafo è rosso.</p>
<p id="green">Questo paragrafo è verde.</p>

Attenzione:L'attributo ID può apparire solo una volta in ogni documento HTML. Vuoi sapere il motivo? Consulta XHTML: ricostruzione del sito web.

Selettore ID e selettore derivato

Nella progettazione moderna, il selettore ID viene spesso utilizzato per creare selettori derivati.

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}

Questi stili verranno applicati solo ai paragrafi che si trovano all'interno dell'elemento con ID 'sidebar'. Questo elemento è probabilmente un div o una cella di tabella, ma potrebbe anche essere un'altra tabella o un altro elemento bloccante. Può anche essere un elemento in linea, come <em></em> o <span></span>, ma questo uso è illegale perché non è possibile inserire <p> all'interno dell'elemento in linea <span> (se dimenticate il motivo, consultate XHTML: ricostruzione del sito web)

Un selettore, molte usi

Anche se l'elemento etichettato come sidebar può apparire una sola volta nel documento, questo selettore ID come selettore derivato può essere utilizzato molte volte:

#sidebar p {
	font-style: italic;
	text-align: right;
	margin-top: 0.5em;
	}
#sidebar h2 {
	font-size: 1em;
	font-weight: normal;
	font-style: italic;
	margin: 0;
	line-height: 1.5;
	text-align: right;
	}

In questo caso, i elementi p all'interno di sidebar sono trattati in modo speciale rispetto agli altri elementi p nella pagina, e allo stesso modo, gli elementi h2 all'interno di sidebar sono trattati in modo diverso rispetto agli altri elementi h2 nella pagina.

Selettore singolo

Il selettore id può agire indipendentemente anche se non viene utilizzato per creare selettori derivati:

#sidebar {
	border: 1px dotted #000;
	padding: 10px;
	}

Secondo questa regola, l'elemento con id 'sidebar' avrà un bordo a punto nero di 1 pixel di larghezza, e avrà anche un margine interno (padding, spazio interno) di 10 pixel. I browser Windows/IE di versione precedente potrebbero ignorare questa regola, a meno che tu non definisca esplicitamente l'elemento a cui appartiene questo selettore:

div#sidebar {
	border: 1px dotted #000;
	padding: 10px;
	}

Contenuti correlati

Se hai bisogno di approfondire le conoscenze sui selettori ID, leggi il tutorial avanzato di CodeW3C.com:Dettagli del selettore id di CSS.