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.
Královna pseudotříd je pseudotřída :has(), protože dokáže fakt kouzlit.
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. Mohlo se na něj kliknout myší, prstem, ale taky se na něj mohlo docvakat tabelátorem na klávesnici |
| focus-visible | prakticky úplně totéž jako :focus, ale je to méně známé, takže to autoři webů zatím nezneužívají. Dovoluje autorům prohlížečů zvýrazňovat focusované prvky, i když to autoři webů přes :focus debilové zakázali. Výchozí zvýraznění :focus-visible v prohlížečích je černý rámeček (outline). Měnit výchozí nastavení focus-visible je dobrý způsob, jak být za ještě většího debila. Též se tomu říkalo "focus ring" nebo "focus-indicated". |
| :focus-within | vztahuje se k prvkům, které obsahují prvek, na nichž je focus. Smysl to má u formuláře form:focus-within. Zkratka pro :has(:focus). |
| :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 odstavec (tag p), když je to 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í střídat řádky tabulky třeba po třech nebo po více.
Pseudotřída :has()
| :has(x) | vybírá prvek, který obsahuje prvek x |
Kdo nechápe, jak je to revoluční, tak ještě spí. CSS od samého počátku umělo vybírat a stylovat prvek něčemu podřízený. Nyní lze vybírat prvek nadřízený. Dřív šlo dělat toto:
auto spolujezdec {vlastnost-spolujezdce: úsměv;}
Šlo tedy vybírat a stylovat podřízený prvek, který byl v nadřízeném prvku. Nyní lze ale vybírat nadřízený prvek, pokud obsahuje podřízený prvek:
auto:has(spolujezdec) {vlastnost-auta: vrčí;}
Takže se vybere jen takový nadřízený prvek, který obsahuje podřízený prvek. V tomto případě se vybere jen takové auto, které obsahuje spolujezdce.
Znamená to, že nyní můžu stylovat bez znalosti toho, co mi přesně dorazí za HTML. Co víc: můžu dělat podmínky, co se má stát, když prvek něco obsahuje, nebo když to neobsahuje.
Trochu se tomu podobá starší pseudotřída :empty. Ta vybírala prvek, který neobsahoval nic (tedy vlastně obsahoval nic). Pseudotřída :empty se hodí i nadále, ale :has je mnohem silnější.
Jestli nechápete, jak je to revoluční, ani teď po přečtení, tak asi stále spíte, nebo to píšu blbě. Dá se to dobře používat od konce roku 2023.
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 fungující přibližně od roku 2023
jenom rychlý soupis toho, co je navrženo, ale když jsem to testoval, tak to ještě nefungovalo. Teď (2024) už to bude lepší.
:dir
:focus-visible - úplně totéž, co :focus. Testovací příklad na focus-visible.
:has() - viz výše
:is() - funguje vlastně jenom jako závorka, když umožňuje zápis více pravidel najednou
:where() - funguje skoro úplně stejně jako :is, rozdíly jsou jenom v síle pravidla
:matches - synonymum k is:, bez podpory
: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
