Pseudoelementy umožňují ve stránce vybrat „virtuální elementy“ – elementy, které nejsou přímo součástí dokumentu, ale může být užitečné s nimi pracovat a přiřadit jim odlišný způsob zobrazení. Pseudoelementy nám dovolí vybrat například první písmeno textu uvnitř elementu nebo první řádku textu.
Pseudoelement se uvozuje dvojící znaků
::. Nejznámější jsou asi pseudoelementy
::first-letter a ::first-line, které
dovolují stylovat první znak a první řádku vybraného elementu. Obvykle
se používají s ostatními selektory, pro výběr elementu, na kterém
chceme požadovaný efekt nastavit, jak ukazuje následující příklad.
<!DOCTYPE html> <html> <head> <title>Ukázka použití pseudoelementů</title> <style> p.iniciala::first-letter { font-size: 300%; float: left } </style> </head> <body> <p class="iniciala">„V té lednici už zase nic není,“ pomyslel si pan J. a smutně si namazal krajíc chleba se sádlem, když v tom se ozvalo zaklepání. Přerušil pohyb ruky, která směřovala spolu s jeho večeří k ústům, a šel ke dveřím.</p> </body> </html>
Všimněme si zajímavé vlastnosti. Kromě prvního písmene se změna nastavení dotkla i uvozovek. Jedná se o ustálený typografický zvyk.
Poznámka
Starší verze CSS pseudoelementy uvozovaly jen jednou dvojtečkou, novější verze pro větší konzistentnost s ostatními selektory používají dvojtečky dvě.
Další dva pseudoelementy ::before a
::after jsou ještě více „magické“. Dovolují vytvořit a
vybrat virtuální element před nebo za jiným skutečným elementem a
pomocí vlastnosti content pak nastavit obsah
takto nově vytvořeného elementu.
Příklad 2. Ukázka generování obsahu před elementem pomocí
::before
<!DOCTYPE html> <html> <head> <title>Ukázka použití pseudoelementů</title> <style> p.note::before { content: "Poznámka: "; font-weight: bold; } </style> </head> <body> <p class="note">Při práci s nožem se můžete pořezat.</p> </body> </html>
Možnosti vlastnosti content a generování obsahu jsou bohaté a jsou podrobněji rozepsány v „Generovaný obsah“.
