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.