Pseudotřídy v CSS

Vzhůru dolů 11.10.2022 08:15 Vítejte v referenční příručce pro pseudotřídy v CSS! Pseudotřídy pomáhají obyčejným selektorům při snadnějším vybírání prvků pro stylování. Díky specifikaci Selectors Level 4 a spolupráci tvůrců prohlížečů můžeme dnes, my webaři, používat pseudotřídy, o kterých se nám dříve nesnilo a pomohou nám psát styly jednodušeji a efektivněji. Příkladem takových pseudotříd je :where a další kombinační pseudotřídy. Projdeme si zde ale všechny. Prakticky použitelných pseudotříd je dnes už přes 40 a vsadím se, že některé z nich neznáte. Související „Problémy“ CSS Kaskáda a specificita Dědičnost v CSS Selektory v CSS Pseudotřídy v CSS Rozcestník typů pseudotříd Podívejme se nejprve na roztřídený seznam všech pseudotříd v CSS. Je jich opravu hodně. Odkazy a kotvy Pseudotřídy odkazů a kotev umožňují vybrat různé typy odkazů ve stránce nebo část stránky, která je cílem kotvy. Pseudotřída Zápis Odkaz :any-link Nenavštívený odkaz :link Navštívený odkaz :visited Cíl kotvy :target Uživatelské akce Pseudotřídy uživatelských akcí vybírají aktivní prvky podle jejich stavu vovolaném uživatelem, například najetím kurzorem nebo zaměřením při ovládání z klávesnice. Pseudotřída Zápis Najetí kurzoru :hover Aktivace prvku :active Zaměření prvku :focus Indikované zaměření :focus-visible Zaměření na rodiče :focus-within Uživatelské vstupy Pseudotřídy uživatelských vstupů umožňují vybrat formulářové prvky podle nastaveného očekávání uživatelského vstupu. Příkladem je povinný prvek nebo zvolené zatržítko . Pseudotřída Zápis Povolený prvek :enabled Zakázaný prvek :disabled Možnost zápisu :read-write Nemožnost zápisu :read-only Zobrazený zástupný text :placeholder-shown Použití automatického vyplnění :autofill Výchozí prvek :default Vybraná hodnota :checked Platnost zadání :valid Neplatnost zadání :invalid Povinnost zadání :required Volitelnost zadání :optional Pořadí potomků Pseudotřídy pořadí potomků vybírají prvek podle jeho pořadí v sadě libovolných prvků nebo v sadě prvků stejného typu. Pseudotřída Zápis N-tého prvku :nth-child N-tého prvku od konce :nth-last-child Prvního potomka :first-child Posledního potomka :last-child Jediného potomka :only-child N-tého prvku stejného typu :nth-of-type N-tého prvku typu od konce :nth-last-of-type Prvního potomka typu :first-of-type Posledního potomka typu :last-of-type Jediného potomka typu :only-of-type Kombinace Kombinační pseudotřídy nejsou až tak zaměřené na konkrétní prvky, ale umožňují zjednodušit selektory, snížit specificitu nebo zavádějí nové možnosti jako selektor rodiče. Pseudotřída Zápis Výběru libovolného prvku :is Nulové specificity :where Negace :not Vztahu :has Ostatní Do ostatních pseudotříd řadím prostě to, co se mi jinam nevešlo. Pseudotřída Zápis Směr :dir Jazyk :lang Celá obrazovka :fullscreen Kořenový prvek :root Prázdný prvek :empty Pojďme se teď jednotlivým pseudotřídám podívat na zoubek. Nesnažil jsem se zde o podrobný popis každé pseudotřídy, to by vydalo na knížku. Alespoň jsem všude doplnil nějaký příklad, aby se vám to lépe představovalo. Odkazy a kotvy Tyto pseudotřídy umožňují vybrat různé typy odkazů ve stránce nebo část stránky, která je cílem kotvy. Pseudotřída hypertextového odkazu – :any-link Pseudotřída :any-link v selektoru představuje jakýkoliv prvek , nebo s atributem href. Podpora v prohlížečích je plná . Pseudotřídy pro historii odkazů – :link a :visited Pseudotřídy cílící na historii prohlížení poskytují možnost vybrat navštívené a nenavštívené odkazy: Pseudotřída :link se vztahuje na odkazy, které ještě nebyly navštíveny. Pseudotřída :visited se uplatní, jakmile byl odkaz uživatelem navštíven. Jak je známo, po určité době mohou prohlížeče vrátit navštívený odkaz do nenavštíveného stavu. Podpora v prohlížečích je plná, včetně MSIE – viz :link a :visited. Pseudotřída cíle – :target Adresa URL dokumentu může odkazovat na konkrétní prvky v dokumentu prostřednictvím fragmentu adresy . Prvky, na které se takto odkazuje, jsou pak „cílovými prvky dokumentu“, jinak též kotvami. Právě aktivní cíle pro kotvy můžeme stylovat díky pseudotřídě :target: Ahoj h1:target V případě URL example.cz/#kotva se pak prvek podbarví žlutou. Podpora v prohlížečích je plná . Uživatelské akce Existuje několik pseudotříd uživatelských akcí pro výběr prvku, na který kliká nebo se kterým jinak pracuje uživatel. Prvek může odpovídat několika takovým pseudotřídám současně. Například stav navštíveného odkazu po najetí myši stylujeme tímto způsobem: :visited:hover Pojďme teď na ty pseudotřídy uživatelských akcí. Pseudotřída najetí ukazatelem – :hover Pomocí :hover vybíráme prvky, na které uživatel najede ukazatelem myši nebo jejich potomky. V moderních prohlížečích to je použitelné jak pro odkazy, tak pro běžné prvky. .box:hover Pseudotřída aktivace prvku – :active Umožňuje vybrat prvky, na které uživatel klikne nebo je aktivuje na klávesnici. Selektor je ale platný jen v čase mezi okamžiky, kdy uživatel stiskne a pak uvolní aktivační tlačítko . Pseudotřídu :active standard HTML omezuje jen na interakční prvky typu nebo , ale v moderních prohlížečích funguje na všech prvcích. .box:active Pseudotřída zaměření prvku – :focus Pseudotřída :focus platí, dokud je prvek zaměřený a přijímá vstupy z klávesnice nebo myši. Toto funguje jen na takzvaně zaměřitelných prvcích, tedy těch, které mohou vyvolávat akci nebo mají roli v navigační struktuře . V ukázce níže platí: Pokud na prvek dojdu navigací pomocí klávesy Tab nebo na něj kliknu, trvale zežloutne. .box:focus Pseudotřída indikovaného zaměření – :focus-visible Pseudotřída :focus-visible platí, když platí :focus a zároveň prohlížeč usoudí, že je vhodné tento prvek při zaměření zvýraznit. Prakticky vzato: :focus vám prvek zvýrazní jak při klikání myši, tak při najetí pomocí klávesy Tab. :focus-visible je výhodnější v tom, že u některých prvků vynechá zvýraznění při najetí myši. CodePen vám to snad pomůže pochopit. Máme dva odkazové boxíky: .box-1:focus .box-2:focus-visible Používat pseudotřídu :focus-visible je výhodné proto, že v uživatelských rozhraních často nechceme razantně zvýrazňovat při klikání, ale pro lepší přístupnost chceme prvky zvýrazňovat při navigaci klávesou Tab. Podpora v prohlížečích je plná . Pseudotřída zaměření na rodiče – :focus-within Pseudotřída :focus-within se vztahuje na jakýkoli prvek, pro který platí pseudotřída :focus, ale také na prvek jehož potomek podmínky pro přiřazení :focus splňuje. .container:focus-within V tomto příkladu bude mít rodič červenou outline , pokud je focus na potomka. Vím, že se to používá pro uchování otevření navigace jen s pomocí CSS a tak dále. Podpora je plná . Uživatelské vstupy Sem patří :disabled, :read-only a další pseudotřídy, jež pomáhají vybírat vstupní prvky, které mají nějaký konkrétní stav. Většinou se aplikují na formulářové prvky. Pseudotřídy povolení a zakázání – :enabled a :disabled V HTML můžeme některé aktivní prvky zobrazit, ale zakázat jejich používání. V uživatelském rozhraní se pak objeví „zašedlé“: Enabled Button Disabled Button Pomocí pseudotříd můžeme vybrat takto povolené nebo zakázané prvky: :enabled :disabled Samozřejmě je toto možné aplikovat jen na prvky, se kterými může uživatel interagovat. Podpora :enabled a :disabled je plná ve všech prohlížečích, včetně prehistorických ještěrů. Pseudotřídy proměnlivosti – :read-only a :read-write Některé aktivní prvky mohou sloužit jen pro čtení. Nejsou tedy zakázané, disabled, ale readonly: Read/Write Textarea Read/Only Textarea Pomocí pseudotřít proměnlivosti je pak možné přistupovat k těmto prvkům a stylovat je: :read-write :read-only Za pozornost stojí, že všechny neaktivní prvky, např. i div jsou samozřejmě readonly. Můžete to ale změnit přidáním atributu contenteditable. Podpora je plná. Pseudotřída zobrazeného zástupného textu – :placeholder-shown Některé prvky, zejména ty vstupní, mohou obsahovat zástupný text : Pseudotřída v CSS jménem :placeholder-shown je tu proto, abychom mohli stylovat prvek, který placeholder obsahuje. :placeholder-shown Podpora je plná, v MSIE s prefixem. Pseudotřída použití automatického vyplnění textu – :autofill Pseudotřída :autofill představuje vstupní prvky, které byly automaticky vyplněny prohlížečem a uživatel je následně nezměnil. Podpora je plná s výjimkou MSIE. Pseudotřída výchozího prvku – :default Pseudotřída :default se vztahuje na prvky uživatelského rozhraní, které jsou výchozí ze sady podobných prvků. Příkladem je výchozí tlačítko mezi sadou tlačítek: Default Button Another Button Styly: :default První ze sady tlačítek bude vždy pro odeslání formuláře výchozí a proto se rámeček obarví. Jiným příkladem je stylování výchozí možnosti z vyskakovací nabídky . Pseudotřída vybrané hodnoty – :checked Aplikuje se na vybraná zatržítka, přepínače nebo vybranou hodnotu ze seznamu hodnot. :checked Samotné obarvení nebo jiné stylování vybrané hodnoty zase tak užitečné není, ale v kombinaci s dalšími selektory to začne být zajímavé: input:checked + label input :not Podpora pseudotřídy :checked je plná. Pseudotřída neurčitých hodnot – :indeterminate Pseudotřída :indeterminate se vztahuje na prvky uživatelského rozhraní, jejichž hodnota je v neurčitém stavu. Například přepínač a zatržítko lze přepínat mezi stavy zaškrtnuto a nezaškrtnuto, ale někdy jsou v neurčitém stavu, tedy ani zaškrtnuto, ani nezaškrtnuto. Podobně může být v neurčitém stavu ukazatel průběhu , když není známo procento zbývající k dokončení. Neurčitou hodnotu přidává buď prohlížeč, nebo ji můžete vynutit atributem indeterminate. Následující pseudotřídy, totiž pseudotřídy kontroly vstupních hodnot, umožňují dát uživateli zpětnou vazbu, pokud něco zadá do formulářového prvku. Patří sem možnost stylovat povinná políčka nebo označení špatného vstupu . Pseudotřídy platnosti – :valid a :invalid Pseudotřída :valid v CSS představuje jakýkoli prvek nebo jiný formulářový prvek, jehož obsah se úspěšně validuje. Je tak možné buď stylovat validní, či nevalidní prvky nebo je označit textem pomocí content: input:invalid input:invalid + label::before input:valid + label::before Ukázku jsem převzal z MDN, kde si ji můžete zkoušet. Na některé prvky není možné platnost aplikovat. Je rozdíl mezi prvkem, který nemá žádná omezení, a byl by tedy vždy :valid, např. , a prvkem, který nemá vůbec žádnou sémantiku platnosti dat, např. , a není tedy ani :valid, ani :invalid. Podpora pro :valid i :invalid je plná. Pseudotřídy rozsahu – :in-range a :out-of-range Těmito pseudotřídami se v CSS představuje prvek , jehož aktuální hodnota se nachází nebo nenachází v rozmezí určeném atributy min a max. Viz výše uvedený příklad: input:out-of-range input:out-of-range + label::before input:in-range + label::before Podpora je plná, MSIE ovšem trucuje. Pseudotřídy volitelnosti – :required a :optional Pseudotřída :required v CSS označuje jakýkoliv vstupní prvek , posledního , několikátého nebo n-tého ) potomka určitého prvku. Pseudotřída n-tého prvku – :nth-child Velmi užitečná pseudotřída, která umožní vybrat prvek na základě opakujícího se pořadí – sudé, liché, n-té nebo prostě několikáté prvky. Obsah v závorce se zapisuje podle vzoru An+B a tedy např. 2n+1 bude každý druhý plus jedna. n je cyklus začínající vždy nulou, takže toto splní každý lichý prvek: první, třetí, pátý… Příklady: tr:nth-child tr:nth-child tr:nth-child tr:nth-child li:nth-child li:nth-child li:nth-child Podpora základní syntaxe je plná. Horší byste to měli, pokud máte v úmyslu takto stylovat prvky v , což nyní funguje jen v Safari. Pseudotřída n-tého prvku od konce – :nth-last-child Pseudotřída :nth-last-child funguje stejně jako :nth-child , jen se pořadí počítá od konce: li:nth-child li:nth-child tr:nth-child Základní podpora je plná. Pseudotřída prvního potomka – :first-child Pseudotřída :first-child představuje prvek, který je první mezi svými sourozenci. Je to totéž jako :nth-child . .content > p:first-child Podpora je plná. Pseudotřída posledního potomka – :last-child Pseudotřída :last-child představuje prvek, který je poslední mezi svými sourozenci. Je to totéž jako :nth-last-child . .content > p:last-child Podpora je plná. Pseudotřída pvku bez sourozenců – :only-child Pseudotřída :only-child představuje prvek, který nemá žádné sourozence. Je to mimochodem totéž jako :first-child:last-child nebo :nth-child :nth-last-child , jen to má nižší specifičnost. Podpora je plná. Pojďme dál. Pod kostrbatým názvem „pseudotřídy indexu potomků stejného typu“ se ve specifikaci nachází další kategorie pseudotříd, která stejně jako ta předchozí umožňuje vybrat n-té prvky ze sady sourozenců. V tomto případě je ale výběr omezený na prvky stejného typu, takže shodné HTML značky, jako například img, p nebo jiné. Pseudotřída n-tého prvku stejného typu – :nth-of-type Umožní vybrat prvek stejného typu na základě opakujícího se pořadí. Od pseudotřídy :nth-child se liší v tom, že umožňuje zaměření jen na prvky stejného typu. Příklady: img:nth-of-type img:nth-child Další pseudotřídy pořadí Selektor Vysvětlení :nth-last-of-type Pseudotřída posledního prvku stejného typu. Podobné jako :nth-last-child, jen vybere poslední n-tý prvek stejného typu, takže stejné HTML značky. :first-of-type Pseudotřída prvního prvku stejného typu. Podobné jako :first-child, jen vybere první prvek stejného typu, takže stejné HTML značky. :last-of-type Pseudotřída prvního prvku stejného typu. Podobné jako :last-child, jen vybere poslední prvek stejného typu, takže stejné HTML značky. :only-of-type Pseudotřída prvku stejného typu bez sourozenců. Pseudotřída :only-of-type představuje prvek, který nemá žádné sourozence stejného typu. Jde o obdobu konstrukce pseudotříd :first-of-type:last-of-type. V závěrečné části tohoto dlouhého textu se podíváme na zoubek pseudotřídám, které zatím nenašly podporu v prohlížečích. To, abychom se měli na co těšit. Kombinace Kombinační pseudotřídy nejsou až tak zaměřené na konkrétní prvky, ale umožňují zjednodušit selektory, snížit specificitu nebo zavádějí nové možnosti jako selektor rodiče. Pseudotřída výběru jakéhokoliv prvku – :is Pseudotřída :is kontroluje, zda prvek na pozici ve vnějším selektoru odpovídá některému ze selektorů v seznamu selektorů. Je to užitečný syntaktický cukr, který umožňuje vyhnout se ručnímu vypisování všech kombinací jako samostatných selektorů: .header h2, .footer h2, .side h2 :is h2 Specifičnost pseudotřídy :is je nahrazena specifičností jejího nejkonkrétnějšího argumentu. Ve specifikaci je k nalezení tento příklad. Zaměřme se v něm na prvek ol: :is > ul > , ol > , .list > , Vysvětlím: V prvním příkladě máme jednu pseudotřídu a jeden atributový selektor. Je to stručnější, ale je zde silnější specificita o hodnotě . V druhém je jedna třída a jeden element. Je to ukecanější, ale má to slabší specificitu . Podpora je plná . Pseudotřída nulové specificity – :where Na rozdíl od :is nepřispívá pseudotřída :where ani žádný z jejích argumentů ke specifičnosti selektoru. Specifičnost :where je vždy nulová. .header h2, .footer h2, .side h2 :is h2 :where h2 Od Stephanie Eckles jsem si půjčil následující příklad: :where :where :where má vždy nulovou specifičnost. To znamená, že jej můžeme použít k nastavení rozumných výchozích hodnot, které lze přepsat. Výchozí hodnoty v demonstrovaném příkladu můžete přepsat pomocí ul nebo ol . Není třeba uvádět také atributový selektor kvůli zvýšení specificity. Podpora selektoru :where je plná s tradiční výjimkou MSIE. Pseudotřída negace – :not Pseudotřída, která vybere prvek, který není reprezentován jejím argumentem: :is h2 :not h2 Specifičnost pseudotřídy :not je nahrazena specifičností nejspecifičtějšího selektoru v jejích čárkou oddělených argumentech. Podpora pseudotřídy :not je plná . Pseudotřída vztahu – :has O relační pseudotřídě :has jsem už dříve psal. Bez ohledu na specifikaci lidsky řečeno je pro nás důležité, že je :has je použitelný jako selektor rodiče… a:has … nebo také jako selektor přechozího sourozence: h1:has Podpora je v Safari a koncem srpna 2022 bude v Chrome. Na Firefox se zatím čeká. Ostatní Pomocí jazykových pseudotříd je možné stylovat prvky podle směru textu ) nebo nastavení jazyka ). Pseudotřída směru  ) Pseudotřída :dir umožňuje webařům napsat selektory, které reprezentují prvek na základě směru určeného jazykem dokumentu. Selektor Vysvětlení h1:dir prvek jehož směr vykreslení podle jazyka je nastavený jako ltr, tedy zleva doprava . h1:dir prvek jehož směr vykreslení podle jazyka je nastavený jako rtl, tedy zprava doleva . Podporu pseudotřídy směru dir v době psaní textu zatím implementoval pouze Firefox. Zajímá vás rozdíl mezi pseudotřídou :dir a selektorem atributu ? Je tam. Selektor atributu se týká pouze daného atributu, pokud je přítomný. Pseudotřída :dir by měla využívat k znalosti sémantiky dokumentu ze strany prohlížeče, takže fungovat, i pokud není jazyk nastavený přímo na HTML prvcích. Například v HTML se směr jazyka prvku dědí, takže potomek bez atributu dir bude mít stejnou směrovost jako jeho nejbližší předek s platným atributem dir. To by samozřejmě atributový selektor nefungoval. Pseudotřída jazyka – :lang Pseudotřída :lang umožňuje psát CSS selektory citlivé na jazyk dokumentu. Selektor Vysvětlení h1:lang prvek , který má nastavený český jazyk. :lang > h1 prvek uvnitř dokumentu v belgické francouzštině. Podpora v prohlížečích je plná . Mimochodem, v HTML je možné jazyk pro dokument nebo prvky dokumentu nastavit kombinací atributu lang, informací ze značek meta a případně také v hlavičkách HTTP. Rozdíl mezi pseudotřídou :lang a atributovým selektorem spočívá v tom, že atributový selektor provádí pouze porovnání s atributem lang u elementu, zatímco pseudotřída :lang se opět snaží zjistit nastavení jazyka jakýmkoliv způsobem. Další rozdíl je v tom, že atributový selektor funguje jako wildcard a umí tedy rozpoznat všechny jazyky začínající na en. Pseudotřída běhu přes celou obrazovku – :fullscreen Pseudotřída :fullscreen se asi nejlépe využije pro stylování stránky zobrazující video nebo samotnou stránku přes celou obrazovku. Hezký příklad jsem našel na MDN, kde různě stylují tlačítko na zobrazení videa přes celou obrazovku: #fs-toggle:not #fs-toggle:fullscreen Další pseudotřídy umožňují výběr na základě informací, které se nacházejí ve stromu dokumentu, ale nelze je reprezentovat jinými selektory. Pseudotřída kořenového prvku – :root Ve DOMu odpovídá pseudotřída :root kořenovému prvku objektu Document. V HTML to bude standardně element , což se ale může javascriptem změnit. V praxi se pseudotřída díky své vyšší specificitě používá pro deklaraci autorských vlastností : :root Podpora je plná. Pseudotřída prázdného prvku – :empty Pseudotřída :empty zastupuje prvek, který nemá žádné potomky. Jen pro pořádek: Potomkem může být buď další prvek nebo text . Potomky naopak nejsou komentáře nebo CSS deklarace. Podpora je plná. Nepodporováno Mezi pseudotřídami je řada takových, které nemají podpory mezi prohlížeči ani co by se za nehet vešlo. Alespoň v době psaní tohoto textu. Všechny je už ale najdete ve čtvrté verzi specifikace CSS Selectors. Pseudotřída kontejneru cíle – :target-within Podobně jako :target vybere cíl kotvy a navíc také každý prvek, jehož potomek je cíl kotvy a tedy splňuje podmínky výběru pro :target. Pseudotřída místního odkazu – :local-link Představuje odkaz, jehož cílová absolutní adresa URL se shoduje s adresou URL vlastního dokumentu. Odkazuje tedy sám na sebe. Zápis nav :local-link by pak umožnil zakázat podtržení odkazu, který vede na aktuální URL. Časové pseudotřídy – :current, :past, :future V některých kontextech konzumace obsahu se může hodit označení prvku, který je časově aktuální, předchozí a následující. Specifikace jako příklady uvádí konzumaci dokumentu pomocí audia a prohlížení videa obsahujícího titulky tvořené technologií WebVTT. Pseudotřídy stavu zdrojů – :playing, :paused, :buffering Ve specifikaci též najdete velmi zajímavé pseudotřídy, pomocí kterých by bylo možné vybrat zdroj stánky jako obrázek nebo video, který se přehrává , je pozastavený nebo se ukládá do mezipaměti . Ve specifikaci je těchto pozoruhodných tříd více, jen zatím pražádnou podporu nemají. Pseudotřídy stavu zobrazení prvků – :modal, :picture-in-picture Opět jde velmi zajímavá skupina pseudotříd, například pro element ve stavu modálního okna nebo zobrazení elementu v režimu PiP , tedy překrývající obsah . Funguje z nich jen :fullscreen. U ostatních si zatím musíme počkat na implementace v prohlížečích. Pseudotřída prázdných hodnot – :blank Umožní nastylovat prázný textový vstup nebo víceřádkový vstup: textarea:blank I zde je podpora v době psaní textu bohužel nulová. Pseudotřídy interakce s uživatelem – :user-valid a :user-invalid Tyto pseudotřídy zvolí prvky, které mají správný nebo nesprávný vstup, takže se podobají pseudotřídám platnosti . Rozdíl je v tom, že :user-valid a :user-invalid platí až poté, co s ním uživatel významně interagoval. Pseudotřídy :valid a :invalid se na prvek aplikují, i když jej uživatel nijak nevyplnil, což je bohužel většinou vcelku nepraktické. Nepraktické na pseudotřídách interakce s uživatelem zase je, že v době psaní textu je podporuje pouze Firefox. Děkuji partnerům Vzhůru dolů. Aktuálně hledají tyto lidi: .