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.
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.
