Le pseudo-classi sono un concetto fondamentale per chi lavora coi CSS. Attraverso le pseudo-classi non si definisce l’aspetto di un elemnto ma di un particolare stato.
Una pseudo classe differisce da una classe in quanto la prima (a differenza della seconda) non esiste materialmente nel documento ma viene "creata" virtualmente dal browser al verificarsi di certi eventi. Un esempio tipico e molto diffuso di pseudo classe è :hover la quale è utilizzata per cambiare l’aspetto di un elemento al passaggio del mouse. Nella logica delle pseudo classi, in pratica, il browser assegna all’elemento coinvolto dall’azione dell’utente una sorta di "classe virtuale" per consentire al web designer di fare delle stilizzazioni che riguardano non l’elemento nella sua generalità ma in relazione ad un determinato stato.
Sintassi delle pseudo classi
Da un punto di vista sintattico la pseudo-classe si definisce con questa sintassi:
selettore:pseudo-classe { ... }La pseudo-classe si definisce apponendo i due punti (:) tra il selettore ed il nome della stessa pseudo-classe.
Per quanto riguarda il selettore non ci sono limiti di sorta rispetto alle possibilità analizzate nelle lezioni precedenti: è possibile apporre una pseudo-classe ad un selettore per classe, per ID, per attributo, ecc. Qualche esempio:
/* selettore per tipo */
p:hover { ... }
/* selettore per classe */
div.bottone:hover { ... }
/* selettore per ID */
#sponsor:hover { ... }
/* selettore per attributo */
input[name="email"]:focus { ... }
/* ecc. */Pseudo-classi per i link
CSS 2.1 offre alcune pseudo-classi apposite per i link. Questo sono:
:link
La pseudo-classe :link può essere applicata solo al tag <a> e definisce l’aspetto del link nel suo stato iniziale, quando non sono stati visitati. Lo scopo di :link è di "sovrascrivere" le impostazioni di default del browser che prevedono colore blu e sottolineatura per i link in questo stato. Vediamo un esempio:
/* applico il colore rosso a tutti i link */
a:link { color: #FF0000; }:visited
La pseudo-classe :visited è utilizzata per definire le regole di presentazione dei link una volta che questi sono già stati visitati dall’utente. Per impostazione di default, i browser utilizzano il colore viola per ricordare all’utente di aver già visto il documento collegato.
/* applico il colore rosso a tutti i link */
a:link { color: #FF0000; }
/* imposto il colore nero per i link già visitati */
a:visited { color: #000000; }Pseudo-classi dinamiche
Oltre alle pseudo-classi per i link (viste poco sopra) esiste una seconda famiglia di pseudo-classi dette dinamiche in quanto lo stato dell’elemento varia a seconda di un’azione dell’utente: un click, il passaggio col cursorse del mouse, ecc.
:hover
Anche questa pseudo-classe è tipica dei link ma può essere utilizzata anche per altre tipologie di elementi, ad esempio bottoni o DIV. Attraverso :hover è possibile, in sostanza, intercettare il passaggio del mouse sopra ad un dato elemento e definire regole di presentazione specifiche per questo stato. Vediamo un esempio proseguendo nella stilizzazione dei link:
/* applico il colore rosso a tutti i link */
a:link { color: #FF0000; }
/* imposto il colore nero per i link già visitati */
a:visited { color: #000000; }
/* imposto la sottolineatura al passaggio del mouse */
a:hover { text-decoration: underline; }Come detto, però, questa pseudo-classe non è riservata ai link, quindi nulla vieta di utilizzarla anche per altri elementi, ad esempio:
/* cambio colore di sfondo di un box quando l'utente ci passa col mouse */
div.box:hover { background-color:#FFFF00; }
/* imposto un bordo nero di 5 pixel su un bottone al passaggio del mouse */
button:hover { border: 5px solid #000000; }:active
Questa pseudo-classe, in realtà, appartiene sia alla famiglia delle dinamiche che di quelle riservate ai link. Mediante :active è possibile definire la presentazione di un link quando attivo, cioè al momento del click dell’utente. Normalmente si tratta di un momento piuttosto breve, ma possiamo prolungarlo mantenendo premuto il pulsante del mouse… in pratica lo stato attivo riguarda l’intervallo di tempo che passa dalla pressione del bottone sino al suo rilascio. Proseguiamo nel nostro esempio:
/* applico il colore rosso a tutti i link */
a:link { color: #FF0000; }
/* imposto il colore nero per i link già visitati */
a:visited { color: #000000; }
/* imposto la sottolineatura al passaggio del mouse */
a:hover { text-decoration: underline; }
/* imposto uno stile grassetto al momento del click */
a:active { font-weight: bold; }:focus
La pseudo-classe :focus è utilizzata per assegnare regole di presentazione specifiche per gli elementi aventi il focus attivo. Si tratta di una pseudo-classe tipica degli elementi del form come, ad esempio, <input> e <textarea>.
Un elemento acquisisce il focus quando è attivo ed è ricettivo nei confronti di eventi generati dalla tastiera. In pratica, per fare un esempio, un campo input ha il focus quando l’utente lo attiva per potersci scrivere dentro. Ad esempio:
/* imposto uno sfondo grigio per gli input col focus */
input:focus { background: #CCC; }La pseudo classe :first-child
Oltre a quelle descritte deve essere menzionata la pseudo classe :first-child. Attraverso di essa è possibile selezionare dinamicamente il "primo figlio" di un elemento padre. Si supponga, ad esempio, di voler selezionare il primo paragrafo dell’intero documento:
body p:first-child { ... }oppure il primo list-item di qualunque lista presente nella pagina:
li:first-child { ... }Gli pseudo-elementi
Un concetto molto affine a quello di pseudo classe è quello di pseudo elemento. Come nel caso delle prime, anche i secondi non sono veri e propri elementi del documento, ma sono porzioni significative di quest’ultimo identificate in modo dinamico (e virtuale) dal browser.
:firs-letter
Attraverso questo pseudo-elemento è possibile formattare la prima lettera di ogni elemento di testo applicando tutti gli stili propri dei blocchi di testo (font, colori, ecc.). Ad esempio:
/* formatto la prima lettera di ogni paragrafo */
p:first-letter { color: #FF0000; font-weight: bold; text-transform: uppercase; }:first-line
Attraverso questa pseudo classe posso identificare la prima linea di un qualsiasi blocco di testo. Il suo funzionamento è identico a quello di :first-letter.
Nota: per rendersi conto di quanto sia dinamico il concetto di pseudo elemento si provi ad applicare :first-line ad un paragrafo di dimensioni liquide e "giocare" con le dimensioni della finestra del browser: allargando o restringendo la finestra vedrete variare, ovviamente, la prima linea di testo e con essa la sua stilizzazione.
:before e :after
Attraverso questi due pseudo elementi è possibile inserire dinamicamente del contenuto all’interno del documento. Il contenuto così inserito è detto "generato".
E’ appena il caso di dire che con :before il contenuto verrà inserito prima e con :after dopo all’elemento identificato nel selettore.
Il contenuto da inserire si definisce mediante la proprietà content la quale accetta come valore:
- semplici virgolette vuote;
- una stringa di testo;
- una URL;
- un contatore numerico;
- un box generico.
Per meglio capire il funzionamento di questi due interessanti pseudo elementi si faccia riferimento ad un codice HTML di esempio:
<p>
<span>Mr.Webmaster</span>
</p>Per prima cosa vediamo come aggiungere del semplice testo prima e dopo la stringa "Mr.Webmaster":
span:before { content: "Evviva " }
span:after { content: ", portale dei webmaster!" }Supponiamo ora di voler aggiungere, invece che del testo, un’immagine dopo la nostra scritta:
span:after { content: url(foto.jpg); }Da segnalare che, oltre alla possibilità di inserire del contenuto generato, i due pseudo elementi in oggetto consentono anche di specificare delle stilizzazioni CSS per tale contenuto. Tornano all’esempio del testo visto poco sopra supponiamo di voler aggiungere un po’ di formattazione:
span:before {
content: "Evviva ";
font-size: 18px;
color: #FF0000;
}E’ appena il caso di far notare al lettore come questi due pseudo elementi possano rivelarsi potenti e preziosi. Grazie ad essi è possibile effettuare profonde manipolazioni dei documenti. Si consiglia, quindi, di approfondire il loro utilizzo mediante esempi e casi d’uso che potete reperire su questo sito oppure facendo qualche rapida ricerca su Google.
