#1 Co je pseudo-class
Jedná se o selektor určený pro prvek, který definuje co se stane, když se nachází prvek ve speciálním stavu. Speciálním stavem je například najetí myší nad prvek (hover), zaměření vstupu (focus) nebo také první vnořený prvek daného prvku (first-child) nebo jeho poslední instance (last-of-type).
Pseudo-class se přidává v CSS ihned za prvek, na který chceme daný stav aplikovat, přičemž se mezi prvek a stavem nachází dvojtečka :. Vypadá to teda takto:
p:pseudo-class {
/* Stylování */
}
#2 Příklady pseudo-class
Kompletní seznam pseudo-class selektorů naleznete v jiném článku. Zde si ukážeme výběr nejčastěji používaných.
:hover
Nejčastěji používaný pseudo-class selektor :hover, slouží pro speciální stav, kdy se nad prvkem nachází myš (ukazetel myši). Používá se často pro odkazy <a>, aby se zvýraznili a bylo jasné, že se jedná o odkaz nebo pro takzvaný tooltip (kousek textu, který má pomoct uživateli).
Kód pro odkaz, který při stavu :hover změní barvu:
a {
color: blue;
}
a:hover {
color: red;
}
:first-child a :last-child
Speciální selektory :first-child a :last-child slouží k výběru prvního a posledního daného prvku v jiném prvku.
<div id="sekce">
<h3>Nadpis</h3>
<p>Odstavec textu</p>
<p>Další odstavec textu</p>
<p>Třetí odstavec textu</p>
</div>
#sekce p:first-child {
margin-bottom: 20px;
}
#sekce p:last-child {
color: blue;
}
V tomto příkladu se pomocí selektoru :first-child první zvolí prvek <p>, jemuž je dáno dolní odsazení margin-bottom. Podobně to má třetí prvek <p>, který je posledním vnořeným prvkem v prvku <div> (vybrán selektorem :last-child) a je mu definováno horní odsazení margin-top.
:nth-child()
Pseudo-class :nth-child() vybírá každý n-tý člen, přičemž posloupnost je definována v závorce selektoru. V závorce se může nacházet klíčové slovo (odd nebo even), jakékoliv číslo nebo jednoduchá rovnice. Příklady každého případu:
p:nth-child(odd) {
/* Stylování */
}
p:nth-child(even) {
/* Stylování */
}
Příklad s klíčovým slovem odd vybere každý lichý prvek (1., 3., 5., …). Klíčové slovo even vybere každý sudý prvek (2., 4., 6., …)
h2:nth-child(3) {
/* Stylování */
}
Selektor :nth-child(3) obsahuje číselnou hodnotu, která v tomto případě vybere 3. vnořený prvek v pořadí.
p:nth-child(4n+0) {
/* Stylování */
}
p:nth-child(3n+1) {
/* Stylování */
}
Pseudo-class, která obsahuje rovnici se dělí na dvě části – první obsahuje číselnou hodnotu s písmenem n, která slouží jako hodnota cyklu (každý n-tý prvek), a druhá hodnota se přidává k hodnotě cyklu po jeho aplikování.
První příklad zvolí každý čtvrtý prvek bez prvního prvku (tedy 4., 8., 12., …), zatímco druhý příklad zvolí každý třetí prvek, počítajíc od prvku prvního (kvůli aditivní hodnotě +1), tedy 1., 4., 7. atd.