Le specifiche CSS offrono la possibilità di definire i selettori utilizzando delle pseudo-classi o dei pseudo-elementi.
L'esempio più classico, che tutti dovrebbero conoscere, è
.my_link {
COLOR: darkblue;
}
.my_link:hover {
COLOR: darkorange;
}
nell'esempio qui sopra my_link è il selettore di classe, hover è il selettore della pseudo-classe. Quasi tutti conoscono l'uso di hover, molto usato per cambiare l'aspetto di un elemento quando l'utente passa il mouse sopra un link o un menu. Esistono però pseudo-classi meno conosciute: quelle maggiormente supportate (al momento di questo articolo) sono
first-child, link, visited, hover, active, focus, lang()
Per le specifiche dettagliate rimandiamo alla guide del W3C.
In questa sede vogliamo chiarire alcune caratteristiche di base delle pseudo-classi, allo scopo di usarle nei nostri fogli di stile senza troppi mal di testa.
Virtualità
Le pseudo-classi, come dice il nome stesso, non esistono in qualità di classi all'interno del documento (X)HTML. E' il browser (o User Agent) che si occupa di applicare “virtualmente” queste classi agli elementi HTML, in risposta alle azioni dell'utente. Consideriamo ad esempio
<a href=”index.html” class=”my_link”>Home</a>
l'elemento a qui sopra ha un'unica classe, che è my_link. Quando passiamo il mouse sopra la scritta “Home” il browser assegna, virtualmente, la classe hover a questo elemento. In altre parole è come se - per un istante - il nostro elemento a fosse scritto così:
<a href=”index.html” class=”my_link my_link:hover”>Home</a>
Ecco perché si parla di pseudo-classi e non di classi. Conoscere la differenza può aiutarci a dissolvere alcuni dubbi che sorgono durante il debug di una pagina web, specialmente se utilizziamo Firebug o similari: questi strumenti mostrano infatti gli elementi HTML come sono interpretati dal browser, che possono essere quindi (momentaneamente) diversi da quelli trasmessi dal server.
Proprietà
Le pseudo-classi non supportano tutte le proprietà delle normali classi CSS. Come indicazione di massima possiamo assumere che ciò che può essere definito per gli elementi in linea vale anche per una pseudo-classe. La morale è: se la proprietà CSS che avete assegnato alla vostra pseudo-classe non viene renderizzata, non prendete a calci il computer. Provate piuttosto a verificare quali sono le proprietà CSS supportate per quel tipo di pseudo-classe.
Text nodes
Un elemento X(HTML) può contenere al suo interno altri elementi, oppure del testo, al quale solitamente ci riferiamo come contenuto dell'elemento (vedi innerHTML in JavaScript). Il nome più corretto per il contenuto dell'elemento è Text node. Ad esempio, l'elemento p qui sotto
<p>Ciao <strong>Mondo!</strong></p>
contiene un nodo di tipo elemento (le due tag <strong> col loro contenuto) e un nodo di tipo testo (la stringa “Ciao ”, spazio incluso). Questa precisazione ci tornerà utile per spiegare il comportamento della pseudo-classe first-child. Consideriamo ad esempio
<p>
Morbi orci nunc, <span>condimentum vel</span> ornare lobortis,
condimentum id tortor.
</p>
e la seguente definizione
span:first-child {
BACKGROUND-COLOR: red;
}
In questo caso lo sfondo rosso apparirà solo sulla frase condimentum vel, e non le sulle altre. Il primo figlio (first-child) è quindi il primo nodo di tipo elemento, che per certi versi si potrebbe definire il primo “figlio legittimo” del nodo padre.
Pseudo-elementi
I più popolari sono first-line e first-letter. Per loro vale lo stesso discorso già visto per le pseudo-classi: non sono elementi HTML “fisicamente” presenti del DOM originale, ma vengono creati dal browser a run-time. Consideriamo ad esempio la prima riga di un paragrafo mentre l'utente ridimensiona la finestra del browser: in questo caso la tag di chiusura del pseudo-elemento first-line cambiarà man mano che l'utente “stringe” o “allarga” la finestra (se il paragrafo rimane sempre interamente visibile). E' quindi evidente che la posizione di un pseudo-elemento cambia in base alle azioni dell'utente, per cui esso non può esistenre nell'HTML statico associato alla pagina.
L'uso degli pseudo-elementi è abbastanza intuitivo e non richiede ulteriori spiegazioni. Diciamo solo che per gli pseudo-elementi è possibile applicare più proprietà rispetto alle pseudo-classi. In prima approssimazione per un pseudo-elemento si possono definire quasi tutte le proprietà degli elementi di blocco, fermo restante lo stesso consiglio di prima: se qualcosa non funziona, verifichiamo subito quali sono le proprietà CSS effettivamente supportate dal pseudo-elemento che stiamo usando.
