Pseudotřídy v CSS

Rychlý seznam pseudotříd používaných v CSS

Pseudotřída je anglicky pseudo class. Někdy se píše dohromady jako pseudoclass.

Zápis pseudotřídy začíná dvojtečkou.

Pseudotřídy se oddělují dvojtečkou, třídy tečkou.

Obecné pseudotřídy

Dají se použít u všech tagů

Podle chování uživatele

:hover prvek je přejížděný myší
:focus na prvku je fokus, což většinou znamená, že je v něm kurzor
:focus-within vztahuje se k prvkům, které obsahují prvek, na nichž je focus. Smysl to má u form:focus-within
:selection část prvku vybraná uživatelem (zamodření myší)

Podle struktury html kódu

:empty prvek je prázdný, nemá žádné vnořené prvky
:root kořenový prvek dokumentu, typicky tag <html>
:first-child první potomek prvku
:last-child poslední potomek prvku
div:first-of-type vybere takový div, který je prvním divem svého rodiče
li:last-of-type vybere takový li, který je posledním li svého rodiče
:only-child vybere všechny prvky, které jsou jediným potomkem svého rodiče
p:only-of-type vybere takový odstavec (tag p), který je jediný odstavec svého rodiče
:nth-child(n) n-tý potomek, kde n je číslo v závorce
:nth-last-child(n) n-tý poslední potomek, kde n je číslo v závorce (poslední je jednička)
:nth-of-type(n) n-tý potomek daného typu (třeba li:nth-of-type(4) je čtvrtý tag <li> svého rodiče)
:nth-last-of-type(n) n-tý potomek daného typu svého rodiče
:not(selektor) vybírá každý prvek, který neodpovídá selektoru v závorce
:lang(cs) prvek má nastaven atribut lang začínající znaky cs. Lepší řešit to selektorem.

U pseudotříd :nth-něco existují milé hodnoty do závorky even a odd, které umožňují vybírat sudé a liché potomky. Nejčastěji se to používá u tabulek, které mají mít střídavě různě barevné řádky. Sudé žluté, liché červené:

tr:nth-child(even) {background-color: yellow;}
tr:nth-child(odd) {background-color: red;}

Alternativně se místo even dá použít zápis (2n) a místo odd (2n+1). Jistě chápete, že pomocí tohoto zápisu s "n" se dají třídat řádky tabulky třeba po třech nebo po více.

Pseudotřídy u odkazů

a:link nenavštívený odkaz
a:visited navštívený odkaz
a:active odkaz aktivovaný tabulátorem
:any-link všechny odkazy bez ohledu na to, zda byly nebo nebyly navštíveny
Odkaz (tag <a>) byl první tag, u kterého mělo smysl používat pseudotřídy. Většinou se tím měnily barvy odkazů, které jsou normálně modré a navštívené jsou fialové.

Pseudotřídy u formulářových polí, zejména <input>

:checked zatržené pole
:disabled pole znepřístupněné atributem disabled (ale je zobrazené)
:read-only input, který je jen pro čtení (atributem readonly)
:read-write input, která nemá atribut readonly
:enabled pole je přístupné pro zápis (normální stav)
:in-range v inputu typu range je zadaná hodnota mezi hodnotami atributrů min a max
:out-of-range v inputu typu range je zadaná hodnota mimo interval zadaný atributy min a max
:invalid v inputu je zadáno něco, co na základě html atributů není validní vstup
:valid opak invalid, tedy input s platným vstupem
:optional input, který není povinnou položkou (nemá atribut required)
:required input, který je povinnou položkou

Většina těchto pseudotříd se vztahuje k html tagu <input>

Pseudotřídy pro část prvku

:first-letter první písmeno prvku
:first-line první řádek prvku
:after prostor za prvkem - lze ho naplnit textem pomocí css vlastnosti content
:before prostor před prvkem - lze ho naplnit css vlastností content

Pseudotřídy zatím bez podpory

jenom rychlý soupis toho, co je navrženo, ale skoro nikde nebo nikde nefunguje

:dir

:focus-visible

:has

:where

:matches

:blank - formulářové prvky bez obsahu

 

Reklama

www.webhosting-c4.cz, webhosting s doménou v ceně. 20GB
o tvorbě, údržbě a zlepšování internetových stránek

Návody HTML CSS JavaScript Články Ostatní

CSS kurz Přehled hodnot Vlastnosti CSS příklady

Jak psát web píše Yuhů, Dušan Janovský. Kontakt.