Pseudo-classi e pseudo-elementi nel CSS3

Cosa sono le pseudo-classi e gli pseudo-elementi nel CSS e CSS3 e come usarli per personalizzare pagine web, blog e siti

Le pseudo-classi sono usate nel linguaggio CSS fin dalla sua prima stesura CSS1 e rappresentano un grosso aiuto per gli web designer che devono progettare pagine web o interi siti.

Le pseudo-classi differiscono dalle classi propriamente dette perché vengono create virtualmente dal browser quando si verificano determinati eventi. La più conosciuta è :hover che è usata per modificare l'aspetto di un oggetto al passaggio del cursore, per esempio un link con il tag a:hover. Chi avesse delle difficoltà a seguire questo post può scaricare il mio ebook gratuito Guida all'HTML e al CSS per avere le nozioni propedeutiche su questi linguaggi di markup.

La sintassi per la dichiarazione di una pseudo-classe è la seguente

selettore:pseudo-classe {dichiarazione;}

I nomi delle pseudo-classi sono preceduti dai due punti (:). Una pseudo-classe segue senza spazi il selettore e può essere associata a tutte le tipologie di selettore.. Alcuni esempi possono essere quelli mostrati qui di seguito:

a:link {color: red;}   /* Pseudo-classe con elemento semplice */
p a:link {color: blue;}  /* Pseudo-classe con selettore discendente */
a.classe1:hover {color: white;}  /* Pseudo-classe con selettore di classe */
#id1:hover {color: white;} /* Pseudo-classe con selettore di id */
input[type=text]:focus {background:green;} /* Pseudo-classe con selettore di attributo */

Un semplice esempio di come usare le pseudo-classi sta nella configurazione dell'aspetto dei link. I browser di default mostrano i link di colore blue e sottolineati. Possiamo forzare questa regola e impostare altri colori, aggiungere grassetto, corsivo, eliminare la sottolineatura, ecc...

PSEUDO-CLASSI DEI LINK

Per modificare l'aspetto iniziale di un link si usa la pseudo-classe a:link e, per impostare l'aspetto dinamico dei link, si usano le pseudo-classi a:visited e a:hover rispettivamente per il link che siano già stati aperti e per quelli che vengono puntati dal cursore. Per esempio questo codice

<style>
a:link {
  color: red;
  text-decoration: none;
  font-weight: bold;
}
a:visited {
  color: green;
}
a:hover {
  color: blue;
}
</style>
<a href="https://www.ideepercomputeredinternet.com">IpCeI</a><br/>
<a href="#">Link da aprire</a><br/>
<a href="#">Link puntato dal cursore</a></br/>

porta a questo risultato grafico

con diversi colori dei link a seconda che siano stati o meno visitati o puntati dal mouse. Tra le pseudo-classi dei link è possibile usare anche quella a:active che imposta l'aspetto del link nel momento del click da parte dell'utente.

PSEUDO-CLASSE FIRST-CHILD

Con la pseudo-classe :first-child possiamo selezionare e formattare un elemento che si trovi ad essere il primo elemento figlio di un altro. La sintassi da usare in questo caso è la seguente:

elemento:first-child {dichiarazioni;}

Per esempio questo codice di esempio

<style>
p:first-child {color: red;}
</style>
<p>Questo è il primo paragrafo che sarà colorato di rosso</p>
<p>Il secondo paragrafo e quello successivo prenderà il colore di default</p>

porterà a questo risultato

Ci sono molte altre pseudo-classi che possono essere usate con il CSS.

ELENCO DELLE PSEUDO CLASSI

Qui di seguito riporto alcune pseudo-classi con esempi di utilizzo.

Elemento	Esempio	Descrizione
:checked	input:checked	Seleziona gli elementi input checked
:disabled	input:disabled	Seleziona gli elementi input disabled
:empty	p:empty	Seleziona gli elementi <p> senza figli
:enabled	input:enabled	Seleziona gli elementi <input> enabled
:first-of-type	p:first-of-type	Seleziona ogni elemento <p> che sia il primo dei suoi genitori
:focus	input:focus	Seleziona elemento <p> con il focus
:in-range	input:in-range	Seleziona elemento <input> con valore in un intervallo
:invalid	input:invalid	Seleziona elemento <p> con un valore invalido
:lang(language)	p:lang(it)	Seleziona elementi <p> con attributo lang(it)
:last-child	p:last-child	Seleziona ultimo figlio degli elementi <p>
:last-of-type	p:last-of-type	Seleziona tutti i <p> che sono gli ultimi dei loro genitori
:not(selector)	:not(p)	Seleziona tutti gli elementi che non hanno un <p>
:nth-child(n)	p:nth-child(2)	Seleziona gli elementi <p> che sono il secondo figlio dei genitori
nth-last-child(n)	p:nth-last-child(2)	Seleziona gli elementi <p> che sono il secondo figlio dei genitori contando a partire dall'ultimo
:nth-last-of-type(n)	p:nth-last-of-type(2)	Seleziona i secondi elementi che hanno <p> come genitori a partire dall'ultimo
:nth-of-type(n)	p:nth-of-type(2)	Seleziona gli elementi <p> che sono i secondi dei loro genitori
:only-of-type	p:only-of-type	Seleziona ogni elemento p che sia il solo figlio dei genitori
:only-child	p:only-child	Seleziona elemento <p> che sia il solo figlio dei suoi genitori
:read-only	input:read-only	Seleziona elemento <input> con valore in un intervallo
:invalid	input:invalid	Seleziona elemento <input> con attributo readonly
:read-write	input:read-write	Seleziona elemento <input> senza attributo readonly
:required	input:required	Seleziona elementi <input> con attributo required
:root	root	Seleziona gli elementi che sono documenti root
:target	#news:target	Seleziona elemento news attivo

Simili alle pseudo-classi sono i pseudo-elementi che si possono usare con il CSS3.

ELENCO DEGLI PSEUDO-ELEMENTI

Ecco l'elenco degli pseudo-elementi con la loro descrizione.

Elemento	Esempio	Descrizione
::after	p::after	Aggiunge contenuto dopo ciascun elemento p
::before	p::before	Aggiunge contenuto prima di ciascun elemento p
::first-letter	p::first-letter	Seleziona la prima lettera di ogni elemento p
::first-line	p::first-line	Seleziona la prima riga di ogni elemento p
::selection	p::selection	Seleziona la porzione di elemento p selezionata dall'utente

Qui di seguito vediamo alcune applicazioni degli pseudo-elementi.

APPLICAZIONI DEGLI PSEUDO ELEMENTI

Per esempio con questo codice

<style>
blockquote:before {
   content: open-quote;
}
blockquote:after {
   content: close-quote;
}
</style>
<blockquote>Testo di una citazione da mettere tra virgolette</blockquote>

si possono aggiungere le virgolette prima e dopo ogni citazione.

La sintassi per usare gli pseudo-elementi ::before e ::after prevede che quello che va mostrato prima o dopo il selettore venga inserito come attributo nel tag content. In linea generale la sintassi è la seguente:

selettore::pseudo-elemento {
   proprietà:valore;
}

Ecco un esempio di come usare gli pseudo-elementi per personalizzare i paragrafi con un codice come questo:

<style>
p:first-child:first-letter {
   font-size: 50px; padding:5px;
}
p:first-child:first-line {
   font-weight: bold;
}
</style>
<p>Aenean placerat. In vulputate urna eu arcu. Aliquam erat volutpat.</p>
<p> Suspendisse potenti. Morbi mattis felis at nunc. Duis viverra diam non justo. In nisl. Nullam sit amet magna in magna gravida vehicula. Mauris tincidunt sem sed arcu. Nunc posuere. Nullam lectus justo, vulputate eget, mollis sed, tempor sed, magna. </p>

che porta a questo risultato

con la personalizzazione del capolettera e della prima riga di un testo. Gli pseudo-elementi come le pseudo-classi hanno la particolarità di essere fittizi o virtuali. Vengono create delle regole con cui sarà possibile formattare i documenti senza che ci siano dei CSS specifici nel codice della struttura della pagina. I codici sono stati testati con Editor HTML Online che mostrano il rendering di un codice da parte del browser.