Pseudotřídy – pseudo-classes
Pseudo-clases jsou specifické CSS selektory, které ovlivňují HTML prvky jen za určité situace, případně jen prvky v určitém pořadí. Jedná se pokračování článku "Základní selektory v CSS".
DŮLEŽITÉ: V tomto článku nenajdete základní selektory. Pokud jste začátečník, pak začněte tímto článkem, který se zabývá základními CSS selektory a zde pokračujete až jako druhý krok.
:hover
Hover patří asi k nejpoužívanějším. Reaguje na umístění kurzoru myši na daném elementu. Setkáte se s ním např. v případě umístění kurzoru myši na tlačítku v menu. Může se projevit změnou barvy tlačítka, vyrolováním podmenu, ale i jakoukoli jinou změnou designu.
Ukázka HTML
<a href="#">odkaz</a>
Ukázka CSS:
a{color:blue;}
a:hover{color:red;}
Všechny pseudotřídy je možné používat i v hloubce viz ukázka:
li:hover a{…}
V tomto příkladu dochází k ovlivnění značky a za předpokladu, že kurzor myši je nad prvkem <li>.
:link
Link se používá pro označení zatím ještě nenavštívených odkazů <a>. Ukázka u jeho opaku, tj. :visited.
:visited
Visited se naopak používá pro označení již navštívených odkazů <a>. Pomocí :link a :visited můžete graficky odlišit odkazy, které návštěvník již navštívil, a které ještě ne.
Ukázka:
<a href="#">odkaz</a>¨
...
a:visited {color: black;}
a:link {color: blue;}
:active
Active se používá pro určení vzhledu prvku, který je právě aktivní.
:nth-of-type(n)
Velice užitečná CSS pseudotřída, která dokáže ovlivnit HTML prvek podle toho, v jakém pořadí se nachází. Užitečné např. také pro tabulky s pruhovaným vzhledem řádků, kdy každý druhý řádek má jinou barvu.
Ukázka CSS pro každý lichý řádek tabulky:
td:nth-of-type(odd){…}
Ukázka pro každý sudý řádek tabulky:
td:nth-of-type(even){…}
Pomocí nth-of-type() můžete určit i konkrétní prvek v pořadí počítaný ze shora.
Příklad pro druhou položku seznamu:
li:nth-of-type(2) {…}
Někdy je potřeba v CSS odpočítávat nejen každý druhý, ale třeba každý třetí, čtvrtý atd. Pro odpočítání např. každého třetího prvku můžeme použít následující pseudo třída:
li:nth-of-type(3n) {…}
Vysvětlení: to 3n zajistí opakování (to se značí „n“) po třech prvcích. Pravidla se tedy budou vztahovat na třetí, šestý, devátý…
Může se někdy stát, že sice např. potřebujete označit každý třetí prvek, ale chcete začít na první pozici. Takový zápis selektoru by vypadal následovně:
li:nth-of-type(3n + 1) {…}
Vysvětlení: to + 1 značí pozici, od které se začne počítat cyklus po třech.
Upozornění: nth-of-type počítání pořadí stejných prvků. Pokud se mezi nimi objeví prvek jiného typu, pak ho ignoruje jakoby tam ani nebyl. Více je to vysvětleno u nth-child.
:nth-last-of-type(n)
Ve své podstatě to samé, jako nth-of-type, jen se počítá z posledního prvku. To je nesmírně výhodné, protože často kodér netuší, kolik prvků v HTML stránce vlastně bude. Způsob používání číslování je stejný jako u nth-of-type.
:first-of-type
Funguje stejně, jako nth-of-type(1), tj. vybere první prvek v pořadí.
:last-of-type
Funguje stejně, jako nth-last-of-type(1), tj. vybere poslední prvek v pořadí.
:nth-child(n)
Tato pseudo class (pseudotřída) se chová hodně podobně jako nth-of-type(n). Způsob zápisu čísel a n-čísel mezi závorky je naprosto stejný. Rozdíl tu ale je. Dokud jsou všechny prvky jdoucí po sobě stejné (např. seznam pomocí <ul> a položky <li>), tak si rozdílu často nevšimnete, protože odlišné chování se vůbec nemusí projevit. Změny si všimnete v okamžiku, kdy se mezi HTML prvky zapojí i nějaký jiný prvek.
Příklad:
<div class="nazev">
<p>Řádek 1.</p>
<p>Řádek 2.</p>
<h2>Nadpis</h2>
<p>Řádek 3.</p>
</div>
CSS:
.nazev p:nth-child(2n) {..}
.nazev p:nth-of-type(2n) {..}
Pokud budeme pseudo-class aplikovat na počítání tohoto HTML kódu, tak se změna projeví. Pseudo-class nth-child totiž <h2> bude započítávat jako prvek i za situace, kdy má ovlivňovat jen značky <p>. Oproti tomu nth-of-type ho počítat nebude, jelikož se nejedná o stejný typ HTML značky.
:last-child
Totéž, co nth-child, jen počítá zezadu.
:checked
Platí pro zvolené prvky <input type="radio"> a <input type="checkbox"> za situace, kdy je input zvolený, tj. checked.
:invalid
Aplikuje se na nevalidní (nesprávný) vstup do <input>.
:read-only
Ovlivní jen HTML značku <input>, která je určena jen pro čtení, ale není možné její obsah měnit.
Další selektory
Aby nebyl článek příliš dlouhý, tak další návody jsme umístili do dalších článků:
- Základní CSS selektory, které předcházejí tomuto článku naleznete zde.
- Pseudo-elements jsou virtuální elementy vytvořené pomocí CSS. Článek zde.
- Praktické používání kombinací různých selektorů a vztahy mezi nimi. Článek zde.