Lezione07: Identificazione e gruppi di elementi (class e id)

Qualche volta potrsti voler applicare uno stile speziale ad un particolare elemento o ad un gruppo particolare di elementi. In questa lezione vedremo in dettaglio come puoi usare class e id per specificare le proprietà a degli elementi selezionati.

Come fai per colorare un titolo particolare in modo diverso rispetto a tutti i titoli del tuo sito web? Come fai per raggruppare i tuoi link in diverse categorie e dare ad ogni categoria uno stile speciale? Questi sono solo alcuni esempi di domande a cui rispondere in questa lezione.

Raggruppare gli elementi con class

Diciamo che abbiamo due liste di link di diversi grappoli di uva usati per il vino bianco e per il vino rosso. Il codice HTML sarà così:

 <p>Uva per il vino bianco:</p>
 <ul>
 <li><a href="ri.htm">Riesling</a></li>
 <li><a href="ch.htm">Chardonnay</a></li>
 <li><a href="pb.htm">Pinot Blanc</a></li>
 </ul>

 <p>uva per il vinoo rosso:</p>
 <ul>
 <li><a href="cs.htm">Cabernet Sauvignon</a></li>
 <li><a href="me.htm">Merlot</a></li>
 <li><a href="pn.htm">Pinot Noir</a></li>
 </ul>
 
 

• Visualizza l'esempio

Ora vogliamo che i link al vino bianco siano gialli, e i link al vino rosso siano rossi mentre i restanti link della pagina rimarranno blu.

Per ottenere questo dividiamo i link in due categorie assegnando una classe a ciascun link usando l'attributo class.

Cerchiamo di definire alcune classi nell'esempio sotto:

<p>Uva per il vino bianco:</p>
<ul>
<li><a href="ri.htm" class="whitewine">Riesling</a></li>
<li><a href="ch.htm" class="whitewine">Chardonnay</a></li>
<li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li>
</ul>

<p>Uva per il vino rosso:</p>
<ul>
<li><a href="cs.htm" class="redwine">Cabernet Sauvignon</a></li>
<li><a href="me.htm" class="redwine">Merlot</a></li>
<li><a href="pn.htm" class="redwine">Pinot Noir</a></li>
</ul>
 
 

In futuro possiamo definire delle proprietà particolari per i link che appartengono rispettivamente a "whitewine"e a "redwine".

 a {
  color: blue;
 }

 a.whitewine {
  color: #FFBB00;
 }

 a.redwine {
  color: #800000;
 }
 
 

• Visualizza l'esempio

Come mostrato nell'esempio puoi definire le proprietà per tutti gli elementi che appartengono a certe classi usando .nomedellaclasse nel foglio di stile del documento.

Identificativo dell'elemento con id

Oltr a raggruppare gli elementi potrsti aver bisogno di identificare un unico elemento. Questo viene fatto usando l'attributo id.

La cosa speciale con l'attributo id è che non ci possono essere due elementi con lo stesso id nello stesso documento. Ogni id deve essere unico, altrimenti dovresti usare l'attributo class. adesso vediamo un esempio sui possibili utilizzi di id:

 <h1>Capitolo 1</h1>
 ...
 <h2>Capitolo 1.1</h2>
 ...
 <h2>Capitolo 1.2</h2>
 ...
 <h1>Capitolo 2</h1>
 ...
 <h2>Capitolo 2.1</h2>
 ...
 <h3>Capitolo 2.1.2</h3>
 ...
 
 

L'esempio sopra è un classico per molti documenti suddivisi in capitoli o paragrafi. Sarebbe naturale assegnare un id a ciascun capitolo come mostrato di seguito:

 <h1 id="c1">Capitolo 1</h1>
 ...
 <h2 id="c1-1">Capitolo 1.1</h2>
 ...
 <h2 id="c1-2">Capitolo 1.2</h2>
 ...
 <h1 id="c2">Capitolo 2</h1>
 ...
 <h2 id="c2-1">Capitolo 2.1</h2>
 ...
 <h3 id="c2-1-2">Capitolo 2.1.2</h3>
 ...
 
 

Diciamo che il titolo per il capitolo 1.2 deve essere in rosso. Questo può essere fatto con i CSS:

 #c1-2 {
  color: red;
 }
 
 

• Visualizza l'esempio

Come mostrato nell'esempio sopra puoi definire le proprietà di uno speficio elemento usando #id nel foglio di stile del documento.

Riepilogo

In questa lezione abbiamo imparato che con l'uso dei selettori class e id, si possono definire delle proprietà per elementi specifici.

Nella prossima lezione vedremo in dettaglio due elementi HTML molto usati con i CSS: <span> e <div>.

Postato sotto: Lezioni CSS