Introduzione ai CSS - HTML5 con CSS e JavaScript - page 75

All'interno di questi selettori, oltre a odd e even , si possono specificare anche numeri o
formule, come -n+3 , che indica le ultime 3 righe di un dato elemento.
Combinando insieme i selettori appena introdotti, diventa possibile dare maggiore fun-
zionalità alle pagine, sfruttando in maniera più semplice la potenza che offrono i CSS ed
evitando, al tempo stesso, di fare uso di JavaScript in queste circostanze, necessità che, pri-
ma di CSS3, era praticamente impossibile evitare.

Gli pseudo-elementi
Esiste una famiglia di selettori che prende il nome di pseudo-elementi, perché, un po' come
le pseudo-classi, sono in realtà degli elementi creati dal browser per consentirci una for-
mattazione più semplice. La tabella 4.2 riepiloga i selettori: i primi due sono stati introdotti
con CSS3, mentre gli ultimi due con CSS2.1.

Pseudo-elemento Descrizione

Applica uno stile alla prima riga di un elemento.

::first-line

::first-letter Applica uno stile alla prima lettera di un elemento.

::before Consente di inserire del contenuto prima dell'elemento.

Consente di inserire del contenuto dopo l'elemento.

::after

Tabella 4.2 - Gli pseudo-elementi disponibili in CSS3.

Questi selettori consentono di far riferimento a un elemento che in realtà non esiste, ma è
creato per noi dal browser. Rispetto ai selettori per le pseudo-classi, sono necessari due ca-
ratteri “:” davanti al nome del selettore stesso, così che possano differenziarsi facilmente.
Analizziamo per un attimo il codice presente nell'esempio 4.12 .

Esempio 4.12 - HTML

<p>Questo è un paragrafo formattato ad arte, che attraverso
i
selettori
del CSS avrà una formattazione particolare.</p>