Pseudoelementy

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“.

Tento dokument je určen výhradně pro osobní potřebu seznámení se s jazykem HTML a tvorbou webových stránek. Jakékoliv jiné použití, včetně dalšího šíření, pořizování kopií, použití při školeních a výuce apod. je výslovně zakázáno a bude považováno za porušení autorských práv.


Copyright © 1997–2014 Jiří Kosek
blog comments powered by Disqus