CSS  »  Guide  »  Guida CSS di base 

Il concetto di pseudo-classe ha qualcosa di "filosofico". Una pseudo-classe non definisce infatti un elemento ma un particolare stato di quest'ultimo. In buona sostanza imposta uno stile per un elemento al verificarsi di certe condizioni.

A livello sintattico le pseuso-classi non possono essere mai dichiarate da sole, ma per la loro stessa natura devono sempre appoggiarsi ad un selettore. Il primo costrutto che esaminiamo è quello con un elemento semplice:

La regola vuol dire: i collegamenti ipertestuali (<a>) che non siano stati visitati (:link) avranno il colore blue. Da qui risulta più chiaro il concetto espresso all'inizio: la pseudo-classe :link definisce lo stile (colore blue) solo in una determinata situzione, ovvero quando il link non è stato attivato. Appena ciò dovesse avvenire, il testo non sarà più blue, perchè la condizione originaria è venuta meno.

Torniamo alla sintassi. La pseudo-classe (tutte iniziano con i due punti) segue senza spazi l'elemento. Subito dopo si crea nel modo consueto il blocco delle dichiarazioni.

Una pseudo-classe può anche essere associata a selettori di tipo classe. I costrutti possibili sono due. Il primo è quello sancito nella specifica CSS1. La pseudo-classe doveva seguire la dichiarazione della classe:

Come va letta questa regola? Avranno il testo verde (green) solo i link non visitati che abbiano come attributo class="collegamento". Sarà verde questo collegamento:

Ma non questo:

A partire dalla specifica CSS2 è consentita anche questa sintassi:

in cui la classe segue la pseudo-classe. Significato e risultati sono comunque identici al primo esempio. Il primo tipo di sintassi garantisce una maggiore compatibilità con i browser più datati. Gli esempi e la sintassi presentati valgono per tutte le pseudo-classi.

:first-child

È supportata solo dai browser Gecko-based (Mozilla e Netscape 6/7) e da Explorer 5 Mac (probabilmente sarà supportato anche nelle versioni di Explorer dalla 7 in poi, che dovrebbero essere più aderenti agli standard). Seleziona e formatta un elemento che si trovi ad essere il primo elemento figlio di un altro elemento.

Sintassi

Esempi

Chiariamo a partire dall'esempio il significato di questa pseudo-classe. La regola va così interpretata: assegna il colore rosso solo ai paragrafi che siano il primo elemento figlio di qualsiasi altro elemento. Esaminando questa porzione di codice:

si capisce che solo i paragrafi indicati saranno rossi, perchè sono primi figli, rispettivamente, di un elemento <div> e di un altro elemento <td>.

Per verificare il supporto provate questo documento che contiene commenti ed esempi anche sulle altre pseudo-classi.

:link

Si applica solo all'elemento (X)HTML <a> che abbia anche l'attributo href. Quindi, non alle cosiddete ancore invisibili ma solo ai link ipertestuali. Definisce lo stile per questo elemento quando il collegamento punta ad un sito o ad una pagina non ancora visitati.

Per sintassi ed esempi si veda sopra.

Altri articoli

Altre guide

Altre newsletter