☰ menu
Pavel Satrapa

Selektory v CSS

Selektory mají v CSS velmi důležitou úlohu. Rozhodují o tom, kterých prvků se dotyčné prvidlo týká a v důsledku tedy která pravidla na něj budou uplatněna. Jestliže prvek nevypadá, jak byste očekávali, v řadě případů bude na vině právě chyba v selektorech.

Zde na stránce představím ty nejčastěji používané. Porkočilé selektory a pravidla pro jejich uplatňování najdete v doplňujících odkazech na konci stránky.

Prvek

Název prvku představuje asi nejjednodušší typ selektoru. Pravidlo se pak vztahuje na všechny výskyty uvedeného prvku. Například pravidlo

h2 { color: red; }

způsobí, že všechny nadpisy kategorie <h2> na stránce budou červené. Chcete-li nastavit stejné hodnoty několika prvkům, můžete je uvést v selektoru všechny najednou oddělené čárkami. Například místo

h1 { color: red; }
h2 { color: red; }
h3 { color: red; }

můžete psát kratší kód se stejným významem:

h1, h2, h3 { color: red; }

Potomek

Říká se mu též kontextový selektor, protože se vztahuje na daný prvek jen v případě, že se vyskytuje v určitém kontextu (uvnitř jiného prvku). Zapisuje se tak, že názvy prvků v selektoru oddělujete mezerou. Například pravidlo

h1 em { color: green; }

předepisuje, že <em>, jež se vyskytne uvnitř <h1>, má být zelené. Na <em> mimo <h1> nemá žádný vliv. Selektor potomka nepožaduje, aby druhý z prvků byl v prvním obsažen přímo. Mezi nimi může být v řetězci vzájemného vnořování libovolný počet dalších prvků. Výše uvedené pravidlo by se proto vztahovalo i na <em> v následujícím nadpisu:

<h1>Příkaz <a id="delete"><em>delete</em></a></h1>

Zde je <em> obsaženo v <a> a to je obsaženo v <h1>. To ale znamená, že <em> je obsaženo v <h1>, byť nepřímo, a kontextový selektor „h1 em“ se na něj proto vztahuje.

Posloupnost prvků určujících kontext muže být libovolně dlouhá. Například sada pravidel

ul li { color: black; }
ul ul li {color: green; }
ul ul ul li {color: blue; }

určuje, že prvky nečíslovaných seznamů první úrovně (<li> uvnitř <ul>) mají být černé, druhé úrovně (<li> uvnitř <ul> a to uvnitř <ul>) zelené a třetí a vyšších úrovní (<li> uvnitř <ul> uvnitř <ul> a ještě jednou uvnitř <ul>) modré.

Třída

Prvek na stránce můžete zařadit do určité třídy a tím mu přiřadit význam (a způsob prezentace). Používání tříd vyžaduje součinnost HTML a CSS. Ve zdrojovém kódu stránky zařadíte prvek do třídy tím, že mu definujete atribut class, jehož hodnotou je jméno třídy. Například následující HTML kód obsahuje odstavec náležející do třídy „poznamka“:

<p class="poznamka">Před použitím je záhodno
zazálohovat data.</p>

Ve stylovém předpisu pak název třídy od prvku oddělíte tečkou. Chcete-li tedy určit, že všechny odstavce (prvky <p>) náležející do třídy „poznamka“ mají mít žluté pozadí, použijte pravidlo

p.poznamka { background-color: yellow; }

Prezentaci třídy ale nemusíte vázat na konkrétní prvek. Můžete říci, že libovolný prvek dané třídy má mít určité vlastnosti. V tom případě ve stylovém předpisu neuvádějte jméno prvku, jen tečku a název třídy. Podle tohoto pravidla

.poznamka { background-color: yellow; }

by každý prvek zařazený do třídy „poznamka“ měl žluté pozadí.

Identifikátor

Identifikátory se používají podobně jako třídy. Také vyžadují spolupráci HTML a CSS – na stránce prvku přiřadíte identifikátor pomocí atributu id:

<p id="copyright">&copy; 2004 Pavel Satrapa</p>

Pamatujte ale na to, že identifikátory by v rámci stránky měly být jednoznačné. Každou hodnotu id tedy smíte na stránce použít jen jednou. Ve stylovém předpisu pak názvu identifikátoru předřadíte znak „#“:

#copyright { color: gray; }

Teoreticky byste i identifikátor mohli kombinovat s názvem prvku

p#copyright { color: gray; }

ale vzhledem k tomu, že identifikátor je v rámci stránky jednoznačný, nemá to valný smysl. Zpravidla se ve stylovém předpisu používá samotný.

Další informace

zpět: vytváření WWW stránek