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 od tříd liší tím, že určují nějaký stav prvku nebo jeho část.
- Třídy, naproti tomu, jsou určeny tím, jestli má prvek v zápisu atribut class s konkrétní hodnotou.
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 |
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
