[GUIDA CSS #11] Elementi speciali: gli pseudo-elementi


[GUIDA CSS #11] Elementi speciali: gli pseudo-elementi

L’ ultima volta vi abbiamo parlato delle pseudo-classi, questa volta invece parleremo di alcuni elementi speciali: gli pseudo-elementi. Il loro utilizzo può risultare molto fittizio, difatti gli pseudo-elementi vanno a formattare parti del documento HTML che non sono contrassegnate da nessun tag HTML in particolare.

Il primo selettore che andremo ad analizzare è :first-letter, esso va a formattare la prima lettera di un determinato elemento e, naturalmente, potrete formattarla con tutte le proprietà legate alla modifica del testo, compreso sfondo, padding e margini. Vediamo un esempio:

p:first-letter {font-weight:bold;}

In questo caso la prima lettera dei paragrafi presenti nella nostra pagina web apparirà in grassetto. Possiamo naturalmente appoggiare gli pseudo-elementi ad una classe o ID particolare come nei 2 esempi che seguono:

p.pluto:first-letter {font-weight:bold;}

p#pippo:first-letter {font-weight:bold;}

A venire formattato sarà, nel primo esempio, solo il paragrafo con classe “pluto” mentre, nel secondo caso, solo il paragrafo con l’ ID “pippo“. Ricordatevi che per la loro stessa natura gli pseudo-elementi, come le psuedo-classi, non possono mai essere dichiarate da sole ma devono appoggiarsi a un qualunque selettore.

Un altro tipo di selettore è :first-line, del quale non è necessario scrivere esempi poiché valgono le medesime regole di :first-letter. Questo pseudo-elemento però va a formattare la prima riga di testo di un qualunque elemento.

Un altro pseudo-elemento dalle caratteristiche molto interessanti è :before. Con esso potrete inserire nel vostro documento un contenuto che in realtà non è presente. Questo contenuto, che può essere un’ immagine o una stringa di testo, verrà inserito prima del selettore a cui vi appoggiate. Facciamo due esempi:

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

p:before {content: “Benvenuti sullo ShikaBlog!”;}

Come potete vedere, nel primo esempio andremo a inserire un’ immagine prima di un paragrafo, mentre nel secondo esempio, analogo al primo, inseriremo prima del paragrafo il testo “Benvenuti sullo ShikaBlog!“. E’ obbligatorio utilizzare “content” prima del contenuto che andrete a inserire.

Ultimo pseudo-elemento è :after. Potete già intuire il suo utilizzo, perfettamente identico a quello di :before, con le medesime regole e la medesima sintassi. A presto con la prossima lezione 😉

<- Lezione precedente (Classi speciali: le pseudo-classi)
Lezione successiva (@-rules: cosa sono e come si usano) ->

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *