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">© 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
- Třída versus identifikátor – kdy použít který
- div a span – významově neutrální prvky
- Pokročilé vztahy mezi prvky
- Pseudotřídy
- Pseudoprvky
- Atributy
- Pořadí
zpět: vytváření WWW stránek