Come utilizzare pseudoclassi e pseudoelementi nei fogli di stile

Una problematica comune dei selettori tradizionali nel css è di poter selezionare esclusivamente un intero elemento, questo di norma porta ad un utilizzo eccessivo di javascript per gestire sottoelementi presenti nella pagina.

Attualmente i css mettono a disposizione una serie di pseudoclassi e pseudoelementi per la gestione di parti o di elementi specifici ma questi vengono usati solo parzialmente a causa dello scarso supporto su Internet Explorer.

Nel panorama attuale, è utile iniziare a vedere come funzionano almeno i selettori che ci garantiscono una buona compatibilità, nella speranza che in tempi brevi tutti i browser supportino a pieno i css 2.1.

Cos’è una pseudo classe?

Una pseudoclasse è un selettore css che distingue un elemento per le sue proprietà intrinseche senza ricorrere ad ulteriori marcature nel linguaggio di markup.

Un esempio sono le pseudoclassi applicabili ai link :link, :visited, :hover e :active (anche dette pseudoclassi dinamiche), queste dovrebbero essere applicabili a qualunque elemento ma Internet Explorer le gestisce solo sull’elemento <a> mentre non sono supportate su altri elementi.

/*regola per tutti i link*/
a{text-decoration:none;}
/*regola per tutti i link non visitati*/
a:link{color:#000;}
/*regola per tutti i link visitati*/
a:visited{color:#666;}
/*regola per l'hover del mouse sul link*/
a:hover{color:#999;}
/*regola per il click del mouse sul link*/
a:active{color:#ccc;}

Occorre prestare molta attenzione all’ordine in cui si definiscono queste regole, in quanto con quest’ordine si otterrà uno stile per link cliccati e al passaggio del mouse sia che siano già stati visitati o meno, nel caso :visited fosse definito dopo :hover i link visitati perderebbero l’effetto al passaggio del mouse.

Cos’è uno pseudoelemento?

Uno pseudoelemento è un selettore css che distingue una parte di un elemento.

Un esempio di pseudoelemento è :first-letter, che permette di applicare una regola alla prima lettera di un testo.

p:first-letter{color:#fff;}

Questa soluzione permette di creare stili per le capolettere nei testi, un effetto grafico molto utilizzato in tipografia ed applicabile anche ai testi su pagine web.

Un ulteriore pseudoelemento è :first-line, utilizzabile come :first-letter permette di definire una regola per la prima riga di un testo.

p:first-line{color:#fff;}

Questo risulta molto comodo per la gestione di background o dell’interlinea della prima riga.

VEDI ESEMPI

I selettori esposti in questo articolo sono solo una parte dei selettori avanzati utilizzabili nei css, ne esistono molti altri ancora poco supportati, è possibile consultare lista di compatibilità dei selettori su Quirksmode.org per rendersi conto del futuro potenziale dei selettori avanzati.

Info su Mauro Accornero

Sviluppatore e Web Designer Freelance, lavora a Milano dove collabora con Agenzie di Comunicazione ed Aziende del settore. Docente presso la Nuova Accademia di Belle Arti a Milano dove tiene corsi in ambito web per il dipartimento di Graphic Design e Art Direction.
Questa voce è stata pubblicata in Articoli, Tutorial e contrassegnata con . Contrassegna il permalink.

Lascia un Commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

*

È possibile utilizzare questi tag ed attributi XHTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>