Pseudo-elementi ::first-line e ::first-letter in CSS

Uno pseudo-elemento di CSS può essere utilizzato per stilizzare una parte specifica di un elemento; per fare un esempio i costrutti basati su pseudo-elementi saranno adottabili per svolgere operazioni come per esempio la stilizzazione della prima lettera di una stringa, di un’intera riga o di un intero elemento; nello stesso modo si potranno impiegare gli pseudo-elementi per procedure che prevedano l’inserimento di un contenuto primo a dopo di un determinato elemento.

Gli pseudo-elementi erano già noti prima dell’introduzione di CSS3, quest’ultimo però ha previsto per essi la notazione basata su “::“,  double colon notation, in sostituzione della notazione basata su “:“, single colon notation, in modo che non vi fosse confusione tra la sintassi associata agli pseudo-elementi e quella propria delle pseudo-classi. La notazione single-colon è comunque considerata ancora accettabile per questioni legate alla compatibilità con CSS1 e CSS2.

Lo pseudo-elemento ::first-line viene utilizzato per aggiungere uno stile particolare alla prima riga di un testo, esso potrà essere applicato soltanto agli elementi block level, come per esempio le paragrafazioni; l’esempio seguente mostra come stilizzare la prima riga di un paragrafo:

p::first-line {
color: #000;
font-variant: small-caps;
}

Questo pseudo-elemento potrà essere applicato a proprietà che riguardano i font, i colori, gli sfondi, le spaziature di lettere e parole, la decorazione dei testi, l’allineamento verticale, la trasformazione dei testi, l’interlinea e clear usato per  impedire che di fianco ad un elemento siano presenti altri elementi con il float; una funzione simile è svolta da ::first-letter, anch’esso è applicabile soltanto agli elementi block level e consente la stilizzazione della sola prima lettera di un testo:

p::first-letter {
color: #000;
font-size: xx-large;
}

Le proprietà coinvolte da ::first-letter sono più o meno le stesse di ::first-line ma la prima è utilizzabile in un maggior numero di casi come per esempio la stilizzazione di margini, gli spazi attorno ai contenuti, i bordi, il float e l’allineamento verticale soltanto nel caso in cui il float sia uguale a none. In ogni caso sarà possibile utilizzare i due pseudo-elementi in combinazione:

p::first-letter {
color: #ccc;
font-size: xx-large;
}

p::first-line {
color: #ddd;
font-variant: small-caps;
}

Da notare che a livello di stilizzazione il resto del contenuto delimitato dalla paragrafazione non verrà in alcun modo influenzato dagli pseudo-elementi impiegati sulla prima lettera e la prima riga, esso infatti conserverà lo stile predefinito previsto dalle regole CSS precedentemente indicate.