PROGRAMMIAMO
HTML - Il selettore id
Selettore id

Il selettore di classe, di cui abbiamo parlato nella precedente lezione, consente di selezionare un gruppo di elementi.

Vi sono però dei casi in cui si vuole selezionare solo un elemento all'interno della pagina, per esempio solo un paragrafo o solo una tabella o solo una particolare immagine. In questi casi si utilizza il selettore id, di cui vediamo subito un esempio qui sotto (nel foglio stile):

#scritta
{
background: #ccc;
text-align: right;
}

Si noti il simbolo del cancelletto # prima del nome dell'id, scelto liberamente. La sintassi generale per definire un id è molto semplice:

#nome_id { proprietà:valore; proprietà:valore; ... }

Una volta che l'id è stato definito all'interno del foglio stile (come sopra), è possibile usarlo nella pagina in questo modo:

<p id="scritta"> Ciao a tutti </p>

La sintassi, come si può vedere, è sostanzialmente molto simile a quella usata per definire e utilizzare le classi (salvo che qui bisogna usare il # nella definizione e l'attributo id nell'utilizzo).

Tuttavia, come si è detto, c'è una differenza fondamentale fra id e classe: l'id è per definizione unico all'interno di una certa pagina (sarebbe un errore definire due paragrafi con lo stesso id), mentre la classe può essere utilizzata per molti elementi.

L'esempio che segue (che per comodità fa uso degli stili incorporati) dovrebbe chiarire meglio il concetto:

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">

<title>Differenza fra id e class</title>

<style>

.rosso {
   color: red;
   }

#scritta
{
background: #ccc;
text-align: right;
}

</style>

</head>
<body>

<h1>ESEMPIO DI USO DI ID E DI CLASS </h1>

<p id="scritta"> Questo è l'unico elemento della pagina con id uguale a scritta</p>
<p class="rosso"> Ci possono invece essere molti elementi con la stessa classe</p>
<p class="rosso"> Questo per esempio è un altro paragrafo con classe rosso</p>
<p class="rosso"> E questo è un altro ancora</p>

</body>

</html>

E' anche possibile applicare id e class allo stesso elemento, come mostra l'esempio seguente:

<p id="scritta" class="rosso"> Ciao a tutti </p>

L'uso dell'id sarà più chiaro quando più avanti tratteremo di posizionamento con i fogli stile.

 

 

precedente - successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it