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 |
Pro stylování prvního písmene prvku přes více řádků využijte krom :first-letter také vlastnost initial-letter. Např. initial-letter: 3 udělá první písmeno přes tři řádky.
Pseudotřídy zatím bez podpory
jenom rychlý soupis toho, co je navrženo, ale když jsem to testoval, tak to ještě nefungovalo. Teď (2023) už to bude lepší.
:dir
:focus-visible
:has
:where
:matches
:blank - formulářové prvky bez obsahu
Pseudoelementy
::selection
Dovoluje měnit barvu vybraného textu a jeho pozadí. Například:
::selection {color: white; background-color: red;}
zobrazí při výběru text bílým písmem (color: white) s červeným pozadím (background-color: red). Výchozí hodnoty jsou background-color: blue; color: white;. Ale pozor, pokud uvedete u ::selection nějakou svou background-color, hodnota color se změní na černou. Pokud dáváte pozadí nějaké tmavé, je na to třeba myslet a dát světlou barvu textu (ideálně bílou).
Dále se dá nastavit text-decoration a text-shadow. Obrázek na pozadí (background-image) je ignorován.
Reklama
