PROGRAMMIAMO
HTML - Pseudoelementi
Pseudoelementi

Uno pseudoelemento è usato per definire lo stile di una parte specifica di un dato elemento. A differenza di una pseudoclasse, che si applica all'intero elemento, quando questo si trova in uno stato particolare, uno pseudoelemento invece si applica solo una parte di un dato elemento.

Un esempio aiuterà a capire meglio il concetto:

.speciale { font-size: 12pt; line-height: 12pt }
.speciale::first-letter { font-size: 200%; font-style: italic; font-weight: bold; float: left }

Supponiamo dunque di avere il seguente paragrafo all'interno della pagina:

<p class="speciale">C'era una volta, in un paese lontano lontano...</p>

Questo verrebbe formattato nel seguente modo:

C'era una volta, in un paese lontano lontano...

Si osservi come la prima lettera del paragrafo venga formattata con dimensioni maggiori rispetto alle altre lettere.

La sintassi per l'utilizzo di uno pseudoelemento è la seguente:

selettore::pseudoelemento {
             proprietà:valore;
             proprietà:valore;
             ...
             }

Si notino i doppi due punti :: che separano il selettore dal nome dello pseudoelemento. Questo permette di distinguere le pseudoclassi (separate da un singolo :) dagli pseudoelementi. Questa distinzione fra pseudoclassi e pseudoelementi è stata introdotta con l'ultima versione dei fogli stile (CSS3) e potrebbe non funzionare correttamente sui browser più datati.

Rimandiamo a W3C Schools per un elenco e una trattazione più approfondita dell'argomento.

precedente - successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it