CSS2 – selektory, pseudotřídy a pseudoelementy

Podívejme se na podrobný přehled nových selektorů, pseudotříd a pseudoelementů, které byly přidány v CSS2.

Selektory

Nejdříve malá omluva za slovo selektor. Nepovedlo se mi najít jeho vhodný český protějšek, a proto jej budu používat v počeštěné variantě. CSS1 definovala čtyři typy selektorů (selectors), které definují vazbu mezi XHTML a CSS. Zopakujme si je:

Tyto selektory jsou všeobecně známé a podporované všemi prohlížeči. CSS2 však přidala celou řadu selektorů nových.

Univerzální selektor

Začněme něčím jednoduchým. Univerzální selektor (universal selector) * se vztahuje na úplně všechny elementy. Pomocí * {color: blue;} tak můžeme například nastavit barvu písma v celém dokumentu na modrou. Univerzální selektor často vynecháváme: *.trida se dá zkrátit na .trida a podobně *#mujid je to samé jako #mujid.

Selektor dítěte

Selektor dítěte (child selector) má syntaxi A>B a označuje všechny elementy B, které jsou dítětem elementu A. Zatímco selektor A B se vztahuje na ty elementy B, které jsou uvnitř A (tedy mohou být i vnořeny do dalšího elementu), selektor A>B bere v potaz pouze ty elementy B, které jsou vnořeny do A přímo.

Selektor sourozenců

Selektor sourozenců (adjacent selector) se zapisuje A+B a vybere všechny elementy B, které mají stejného rodiče jako A a které po něm zároveň přímo následují. Například selektor h1+h2 označí následující podnadpis:

…
<h1>nadpis</h1>
<h2>podnadpis</h2>
<p>text odstavce…</p>
…

Selektory skrze atributy

Tyto selektory (atribute selectors) mi přijdou jako velmi užitečný a zjednodušující nástroj. Základním typem je A[atr] značící všechny elementy A, které mají nastavený atribut atr (na jakoukoliv hodnotu). Takto můžeme například vybrat všechny elementy tvořící odkaz: *[href] (což se jistě bude hodit v XHTML 2.0). I zde lze univerzální selektor vynechat a napsat pouze [href].

Dalším typem selektoru skrze atribut je A[atr=hodnota]. Ten se, jak jistě tušíte, vztahuje na všechny elementy A, které mají nastaveny atribut atr="hodnota". Tohoto určitě využijeme při zvýraznění všech odkazů vedoucích na Interval: a[href=http://www.interval.cz] {font-weight: bold;}. Užitečný by tento selektor mohl být při formátování formulářových prvků skrz atribut type.

Předposledním typem je A[atr~=hodnota]. Vztahuje se na všechny elementy A s atributem atr, jehož hodnotu tvoří seznam slov oddělených mezerou a právě jedno z těchto slov se shoduje s „hodnota„. Pravděpodobně nejste z předchozího vysvětlení příliš moudří, následující příklad snad vše vyjasní. Selektor p[title~=odstavec] označí <p title="nějaký odstavec">, zatímco p[title=odstavec] takto neučiní. Pokud je hodnota atributu pouze jednoslovná, chová se tento selektor stejně jako A[atr=hodnota], tedy vybere ty elementy A, které mají atribut atr="hodnota".

Neméně podivný je poslední selektor skrze atribut, který se v CSS2 vyskytuje. Zapisuje se A[atr|=hodnota] a označí všechny elementy A, jejichž hodnota atributu atr začíná řetězcem hodnota, pak následuje pomlčka a další řetězec. Snad vše i zde ujasním příkladem. Selektor p[lang|=en] vybere všechny odstavce napsané anglicky (pro angličtinu je definováno více zkratek, např. en, en-US…). Toto řešení asi v praxi nepoužijete, neboť se ještě v tomto článku dozvíte, jak výběr na základě jazyka provést mnohem šikovněji.

Selektory skrze atributy se dají zesilovat vícenásobným uvedením různých podmínek v hranatých závorkách. Takto například vybereme všechny elementy, které tvoří odkaz a mají nastaven atribut title: *[href][title].

Podpora selektorů v prohlížečích

Bohužel, v této kategorii IE6 zklamal na celé čáře, podporuje pouze univerzální selektor. A přitom se jedná o velmi dobré nástroje pro psaní stylů a stránek vůbec. Můžeme tak jenom marně doufat, že se v další verzi Exploreru polepší.

Pseudoelementy

První řádek

Pseudoelementy jsou speciální elementy, které prohlížeč jakoby vloží do existujícího elementu na základě nějakého stavu. To tedy znamená, že pseudoelementy ovlivní vzhled části skutečného elementu. Předchozí věty si nejlépe objasníme na pseudoelementu :first-line, který v daném elementu označí první řádek. Prohlížeč jakoby udělá toto:

<style type=“text/css“>
  p:first-line {styl prvního řádku;}
</style>
…
<p><p:first-line>Tento řádek se na monitoru zobrazí jako první</p:first-line>
a zde odstavec pokračuje…</p>

Prohlížeč tedy zjistí, jaká část odstavce bude tvořit první řádek a na ni bude aplikovat pseudoelement :first-line. Tento pseudoelement lze aplikovat pouze na blokové elementy.

První písmeno

V typografii se také používá pojem iniciála. Obvykle jde o první písmeno kapitoly, které je nějak zvýrazněno (větším nebo ozdobným písmem). Pro něj je v CSS2 vyhrazen pseudoelement :first-letter. Chtějme například, aby začínal první odstavec po hlavním nadpise h1 iniciálou. Pomocí tohoto pseudoelementu a selektoru sourozenců to zvládneme na jedničku:

h1+p:first-letter
{font-size: 200%;
font-weight: bold;}

Místo před a za

Další pseudoelementy zde pouze nastíním, přesný popis použití uvedu v článku o číslování (counters). Jde o elementy :before a :after, značící místo před začátkem a za koncem obsahu elementu. Obvykle se dají použít pro vkládání textu, obrázků nebo počítadel do textu.

Podpora pseudoelementů v prohlížečích

Pseudotřídy

Pseudotřídy jsou speciálním typem tříd (class), které jsou aktivovány obvykle nějakou speciální událostí nebo speciálním stavem. Narozdíl od pseudoelementů jsou aplikovány vždy na celý obsah elementu, nikoli pouze na jeho část.

Pseudotřídy odkazů

Nejvíce pseudotříd je definováno pro odkazy. Podívejme se, které to jsou.

• :link – třída aplikovaná na ještě nenavštívený odkaz
• :visited – značí již navštívený odkaz

Pro výše uvedené třídy platí, že o jejich použití je rozhodnuto již při načítání stránky (prohlížeč ví předem, zda byl odkaz již navštíven či nikoli). Následující pseudotřídy jsou naopak považovány za dynamické pseudotřídy, jejich použití je vyvoláno určitou událostí.

• :active – daný odkaz byl uživatelem aktivován (což v praxi znamená, že uživatel nad odkazem zmáčknul tlačítko myši a ještě jej nepustil)
• :hover – tato třída je aktivovaná, pokud uživatel přejede kurzorem nad odkazem
• :focus – odkaz byl „zaměřen“ (např. pomocí klávesy TAB)

Pseudotřídy :hover a :focus byly do kaskádových stylů přidány ve verzi CSS2. Jednoduchý stylesheet by vypadal takto:

a:link
{color: black;
text-decoration: none;
font-weight: bold;}
a:hover a:focus
{color: red;
text-decoration: underline;}
a:visited
{color: blue;}

Tímto jsme nadefinovali odkaz, který se bude zobrazovat černým tučným nepodtrženým písmem, při najetí kurzorem nebo vybrání klávesou TAB změní svou barvu na červenou a podtrhne se, pokud již byl navštíven, zobrazí se modře.

Jazyková pseudotřída

Jazyková pseudotřída byla přidána v CSS2. Syntaxe je následující: :lang(jazyk), kde jazyk je kód jazyka definovaný v RFC1766. Například :lang(en) vybere všechny elementy psané anglicky.

Rodičovská pseudotřída

Poslední pseudotřídou v CSS2 je :first-child. Je aplikována na všechny elementy, které jsou prvním dítětem (first child) jiného elementu. Z následujícího příkladu by mělo být vše jasné:

…
<style type=“text/css“>
  p {color: black;}
  p:first-child {color: red;}
</style>
…
<div>
  <p>Toto je první odstavec příslušného oddílu div. Měl by být napsán červeným písmem…</p>
  <p>Další odstavec by už měl být napsán černě.</p>
</div>
…
<div>
  <h1>Nadpis odstavce</h1>
  <p>Pozor! Tento odstavec bude napsán černě, neboť prvním dítětem oddílu div je tentokrát nadpis h1!!!</p>
</div>

Podpora pseudotříd v prohlížečích

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.