Gli Pseudo-elementi | Guida CSS

Gli=20 Pseudo-elementi

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

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

:first-letter

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

Sintassi

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

p:first-letter {color: red; font-weight: = bold;}

=C8 possibile anche usare classi:

p.nome_classe:first-letter {color: red; = font-weight:=20 bold;}

O selettori di tipo ID:

#nome_id:first-letter {color: red; = font-weight:=20 bold;}

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

:first-line

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

Sintassi

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

Esempi

p:first-line {color:=20 blue;}
p.nome_classe:first-letter {color:=20 blue;}
td#nome_id:first-letter {color: blue;}

:before

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

Sintassi

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

h1:before {content: = url(immagine.gif);}

Volendo inserire una stringa essa va racchiusa tra=20 virgolette:

h1:before {content: "Il titolo = =E8...";}

:before non =E8 supportato da Explorer per = Windows.

:after

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

Sintassi

h1:after {content: = url(immagine.gif);}
h1#nome_id=20 {content: "Testo del titolo";}

Esempi e codice anche in questa pagina.

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 ] =