CSS  »  Guide  »  Guida CSS di base 

Vi sono parti in un documento (X)HTML che non sono rappresentate da nessun tag in particolare, ma che è possibile comunque modificare e formattare secondo i propri desideri con i CSS grazie ai cosiddetti pseudo-elementi. Il nome un pò criptico può essere così spiegato: nel momento in cui in un foglio di stile si costruisce una regola che ad essi fa riferimento è come se nel documento venissero inseriti nuovi elementi che hanno la caratteristica di essere appunto fittizi, presenti nel CSS ma non nel codice che definisce la struttura della pagina.

Il supporto di questo tipo speciale di selettore è garantito solo dai browser più recenti, pertanto attenti all'uso. E occhio alla ormai nota tabella di Eric Meyer.

:first-letter

Con questo selettore è possibile formattare la prima lettera di qualunque elemento contenente del testo. Le proprietà modificabili sono ovviamente tutte quelle relative al carattere e al testo, ma anche quelle legate al colore, allo sfondo, ai margini e al padding.

Sintassi

La sintassi di tutti gli pseudo-elementi è soggetta alla stesse regole. La più importante è che essi non possono essere dichiarati da soli, ma vanno sempre collegati ad altri selettori. Non importa di che tipo essi siano. La definizione più semplice è quella che prevede l'applicazione di uno pseudo-elemento a un selettore semplice:

È possibile anche usare classi:

O selettori di tipo ID:

Per tutte le regole usate negli esempi il testo degli elementi presenterà la prima lettera rossa e in grassetto.

:first-line

Imposta lo stile della prima riga di un elemento contenente del testo.

Sintassi

Valgono le stesse regole generali viste per :first-letter.

Esempi

:before

Grazie allo pseudo-elemento :before è possibile inserire nel documento un contenuto non presente nello stesso. Più esattamente, con :before si inserisce contenuto prima dell'elemento definito nel selettore. Il contenuto da inserire si definisce tramite la proprietà content e può essere una semplice stringa di testo, un URL che punti a un'immagine o ad un'altro documento, un contatore numerico, semplici virgolette.

Sintassi

Facciamo un esempio per chiarire l'uso. Immaginiamo di voler inserire un'immagine particolare prima di ogni titolo <h1>. Useremo in questo modo lo pseudo-elemento :before:

Volendo inserire una stringa essa va racchiusa tra virgolette:

:before non è supportato da Explorer per Windows (almeno fino alla versione 6).

:after

Pseudo-elemento complementare a :before. L'unica differenza è che il contenuto viene inserito dopo l'elemento specificato nel selettore.

Sintassi

Esempi e codice anche in questa pagina.

Altri articoli

Altre guide

Altre newsletter