Corsi on-line

Selettori CSS: universale, per tipo, classe e ID

  • CommentiScrivi un commento
  • ForumDiscuti sul forum
  • PrevRegole, commenti e direttive
  • NextSelettori di relazione e per attributo

Nella precedente lezione abbiamo visto come costruire una regola CSS ed abbiamo visto che il primo elemento (partendo da sinistra) prende il nome di selettore.

Il selettore, come il nome lascia intuire, serve "per selezionare" il o gli elementi della pagina cui applicare le dichiarazioni contenute tra le parentesi graffe (il cosiddetto "blocco dichiarativo").

L'articolo continua dopo la pubblicità

Sino ad ora abbiamo utilizzato come selettore semplicemente il tipo del tag:

p { color: #FF0000; }

Così facendo, come già detto, lo stile definito verrà applicato a tutti i tag di "tipo paragrafo" (<p>) della nostra pagina.

In realtà i selettori offerti da CSS sono molteplici e consentono di effettuare selezioni molto precise. Nel corso di questa lezione li affronteremo ad uno ad uno, partendo da quello più generico, il selettore universale.

Selettore universale

E' indicato con il carattere asterisco (*) e serve per identificare "ogni elemento del documento". Facciamo un esempio:

* { color: #FF0000; }

Con il codice qui sopra assegno il colore rosso a tutti gli elementi della pagina: quindi ogni testo scritto all'interno di un paragrafo, di una cella di tabella, di un DIV, di un elenco puntato, ecc. sarà di colore rosso.

Selettori di tipo

Si tratta del selettore che abbiamo utilizzato, per motivi di semplicità espositiva, sino a questo punto della guida. Mediante questo selettore si applica uno stile a tutti i tag di un dato tipo: tutti i link, tutti i paragrafi, tutti i DIV, ecc. Vediamo un esempio:

/* imposto il testo in rosso per tutti i paragrafi */
p { color: #FF0000; }

/* imposto il colore verde acido per tutti i link */
a { color: #00FF00; }

Selezione mediante classe

Nella prima lezione della nostra guida abbiamo già detto che il modo per collegare le regole CSS ai singoli tag dell'HTML è offerto dall'utilizzo di classi e ID. Fino ad ora, infatti, abbiamo visto come agire sull'universalità degli elementi o su specifiche tipologie di tag, ma se volessimo applicare un dato stile solo ad uno o più tag ben specifici di un determintao tipo? Se, cioè, non volessimo colorare di rosso tutti i paragrafi di testo ma solo alcuni?

La risposta a questa esigenza ci è offerta dall'utilizzo, appunto, delle classi. Mediante una classe è possibile definire uno o più elementi cui applicare un dato stile. Vediamo un esempio, partendo dal codice HTML:

<p>...paragrafo 1...</p>
<p class="rosso">...paragrafo 2...</p>
<p>...paragrafo 3...</p>
<p class="rosso">...paragrafo 4...</p>

Come possiamo vedere al secondo ed al quarto paragrafo abbiamo applicato un attributo class al quale abbiamo assegnato valore "rosso". Questo valore (che ho scelto in modo del tutto arbitrario) mi servirà per collegare questi due paragrafi ad una precisa regola di stile. Vediamo il CSS:

p.rosso { color: #FF0000; }

Così facendo il colore rosso verrà applicato solo ai paragrafi 2 e 4.

Come potete vedere il mio selettore è cambiato: all'indicazione del tipo (p) segue la specifica della classe (si usa il punto seguto dal nome della classe).

Volendo avrei potuto indicare anche solo il nome della classe:

.rosso { color: #FF0000; }

La differenza tra le due sintassi non è marginale: nel primo caso lo stile verrà applicato solo ai paragrafi con classe "rosso", nel secondo caso lo stile verrà applicato a qualsiasi tag avente classe "rosso".

E' importante precisare che ogni elemento della pagina può essere associato anche a più classi; per farlo, all'interno dell'attributo class, i diversi nomi delle classi sono separati da uno spazio come nell'esempio qui sotto:

<p class="rosso maiuscolo">...paragrafo 2...</p>

Così facendo il nostro elemento "riceverà" gli stili associati sia alla classe "rosso" che alla classe "grassetto". L'ordine con cui vengono specificate le classi non ha alcuna rilevanza.

p.rosso { color: #FF0000; }
p.grassetto { font-weight: bold; }

All'interno di un foglio di stile è anche possibile concatenare più classi, ad esempio:

p.rosso { color: #FF0000; }
p.rosso.grassetto { font-weight: bold; }

In pratica questa seconda definizione dello stile della classe "grassetto" è dipendente dalla classe "rosso": in pratica lo stile grassetto verrà applicato solo agli elementi che possiedono entrame le classi ("rosso" e "grassetto").

Una precisazione conclusiva: ad una classe si può assegnare il nome che si vuole e lo si può scrivere indifferentemente in maiuscolo ed in minuscolo, purchè il nome non presenti spazi e sia composto esclusivamente da caratteri alfanumerici (numeri e lettere), underscore (_) e trattino (-).

Selezione mediante ID

La selezione di un elemento mediante ID funziona in modo molto simile a quanto visto per le classi. La differenza principale tra classi e ID è una sola: le classi possono riguardare una pluralità di elementi, l'ID è sempre univoco! Ogni elemento può avere uno ed un solo ID ed al contempo non possono esistere due diversi elementi col medesimo ID.

A livello di codice HTML l'ID viene specificato mediante l'omonimo attributo:

<h1 id="titolo">...titolo...</h1>

Per quanto riguarda il CSS la sintassi del selettore cambia nuovamente:

h1#titolo { color: #FF0000; }

Come potete vedere ho scritto il selettore specificando il tipo del tag seguito da cancelletto (#) e valore dell'attributo ID. In questo caso il selettore avrebbe potuto scriversi più brevemente in questo modo:

#titolo { color: #FF0000; }

omettendo, cioè, l'indicazione del tipo. Essendo l'ID univoco, infatti, l'indicazione del tipo è assolutamente superflua.

Da un punto di vista pratico la scelta tra classe e ID dipende da quanti elementi sono coinvolti nella stilizzazione. Se si tratta di stilizzare un solo elemento sarà possibilre riccorere all'ID, viceversa sarà necessario utilizzare una classe (o un altro tipo di selettore che consenta di identificare una molteplicità di elementi).

Corsi
Vedi anche...
Altre Guide