Le pseudo-classi | Guida CSS

Le=20 pseudo-classi

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

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

a:link {color: blue;}

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

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

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

a.collegamento:link {color: green;}

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

Ma non questo:

A partire dalla specifica CSS2 =E8 consentita anche = questa=20 sintassi:

a:link.collegamento

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

:first-child

=C8 supportata solo dai browser Gecko-based (Mozilla e = Netscape=20 6/7) e da Explorer 5 Mac. Seleziona e formatta un elemento = che si=20 trovi ad essere il primo elemento figlio di un altro = elemento.

Sintassi

<elemento>:first-child=20 {<dichiarazioni>;}

Esempi

p:first-child {color:red;}

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

si capisce che solo i paragrafi in grassetto saranno = rossi,=20 perch=E8 sono primi figli, rispettivamente, di elemento = DIV e=20 di un altro elemento TD.

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

:link

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

Per sintassi ed esempi si veda sopra.

L=20 e z i o n e s u c c e s s i v=20 = a
[ S o m m a r i = o=20 ] =