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").
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
Come accade per altri ambiti dell’ecosistema informatico, anche i selettori CSS hanno il loro carattere jolly; un "carattere jolly" è un metacarattere (detto anche wildcard) che, quando posizionato all’interno di una stringa, non ha il compito di offrire una rappresentazione di sé stesso, ma quello di rappresentare un’altra sequenza di caratteri.
Nello specifico l’asterisco, riguardo al caso dei fogli di stile, rappresenta tutti gli elementi. In pratica il simbolo dell’asterisco potrà essere utilizzato per settare una regola globale per tutti gli elementi della pagina o per stilizzare tutti gli elementi all’interno di un dato selettore.
Per fare un esempio, sarebbe possibile adottare il carattere jolly come nell’esempio seguente:
* { 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.
#blah * { display: block; }In tal modo si avrà la possiilità di mostrare tutti gli elementi relativi al selettore indicato (id "blah") come block elements.
L’utilizzo dei selettori universali può rivelarsi comodo per effettuare il reset degli stili predefiniti dei browser.
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).
