Pseudotřídy v CSS (staré i úplně nové)

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.

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.

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.

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 (:required) nebo zvolené zatržítko (:checked).

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.

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.

Ostatní

Do ostatních pseudotříd řadím prostě to, co se mi jinam nevešlo.

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 <a>, <area> nebo <link> s atributem href.

Podpora v prohlížečích je plná (s výjimkou MSIE).

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 (example.cz/#kotva). 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:

<h1 id="kotva">Ahoj</h1>

h1:target {
  background: yellow;
}

V případě URL example.cz/#kotva se pak prvek <h1> podbarví žlutou.

Podpora v prohlížečích je plná (včetně MSIE).

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 {
  color: red;
}

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.

/* Prvek zežloutne jen v momentě najetí myši na něj: */
.box:hover {
  background: yellow;
}

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 (třeba primární tlačítko myši).

Pseudotřídu :active standard HTML omezuje jen na interakční prvky typu <a> nebo <button>, ale v moderních prohlížečích funguje na všech prvcích.

/* Prvek zežloutne jen v momentě kliknutí na něj: */
.box:active {
  background: yellow;
}

Pseudotřída zaměření prvku – :focus

Pseudotřída :focus platí, dokud je prvek zaměřený (tedy je na něm „fokus“) 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 (<a>, <button>…) nebo mají roli v navigační struktuře (např. pomocí atributu tabindex).

V ukázce níže platí: Pokud na prvek dojdu navigací pomocí klávesy Tab nebo na něj kliknu, trvale zežloutne.

/* Prvek zežloutne v případě zaměření: */
.box:focus {
  background: yellow;
}

Pseudotřída indikovaného zaměření – :focus-visible

Pseudotřída :focus-visible platí, když platí :focus (prvek je zaměřený) 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:

/* Zvýrazní se při kliknutí i při najetí Tab: */
.box-1:focus {
  outline: 2px solid blue;
}

/* Zvýrazní se jen při najetí Tab: */
.box-2:focus-visible {
  outline: 2px solid red;
}

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á (s výjimkou MSIE).

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 {
  outline: 2px solid red;
}

V tomto příkladu bude mít rodič červenou outline (dočasné zvýraznění), pokud je focus (zaměření pomocí myši nebo klávesnice) 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á (s výjimkou MSIE).

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é“:

<button>Enabled Button</button>
<button disabled>Disabled Button</button>

Pomocí pseudotříd můžeme vybrat takto povolené nebo zakázané prvky:

:enabled {
  color: blue;
}

:disabled {
  color: black;
}

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 (možnosti zápisu) – :read-only a :read-write

Některé aktivní prvky mohou sloužit jen pro čtení. Nejsou tedy zakázané, disabled, ale readonly:

<textarea>Read/Write Textarea</textarea>
<textarea readonly>Read/Only Textarea</textarea>

Pomocí pseudotřít proměnlivosti je pak možné přistupovat k těmto prvkům a stylovat je:

:read-write {
  color: blue;
}

:read-only {
  color: brown;
}

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 (placeholder):

<input type="text" value="This is value">
<input type="text" placeholder="This is placeholder text">

Pseudotřída v CSS jménem :placeholder-shown je tu proto, abychom mohli stylovat prvek, který placeholder obsahuje.

:placeholder-shown {
  border-color: blue;
}

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:

<form action="#">
  <button>Default Button</button>
  <button>Another Button</button>
</form>

Styly:

:default {
  border-color: blue;
}

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 <select>.

Pseudotřída vybrané hodnoty – :checked

Aplikuje se na vybraná zatržítka, přepínače nebo vybranou hodnotu <option> ze seznamu hodnot.

:checked {
  color: blue;
}

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é:

/* Obarvíme textové popisky pro vybrané zatržítko: */
input:checked + label {
  color: blue;
}

/* Obarvíme zatržítka, které nejsou vybrané: */
input[type=checkbox]:not(:checked) {
  color: gray;
}

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č (<input type=radio>) a zatržítko (<input type=radio>) 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 <progress>, 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 (:required) nebo označení špatného vstupu (:invalid).

Pseudotřídy platnosti – :valid a :invalid

Pseudotřída :valid v CSS představuje jakýkoli prvek <input> 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 {
  border-color: red;
}

input:invalid + label::before {
  content: '✖';
  color: red;
}

input:valid + label::before {
  content: '✓';
  color: green;
}

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ř. <input type=text>, a prvkem, který nemá vůbec žádnou sémantiku platnosti dat, např. <p>, 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 <input>, jehož aktuální hodnota se nachází (:in-range) nebo nenachází (:out-of-range) v rozmezí určeném atributy min a max.

Viz výše uvedený příklad:

input:out-of-range {
  border-color: red;
}

input:out-of-range + label::before {
  content: '✖';
  color: red;
}

input:in-range + label::before {
  content: '✓';
  color: green;
}

Podpora je plná, MSIE ovšem trucuje.

Pseudotřídy volitelnosti – :required a :optional

Pseudotřída :required v CSS označuje jakýkoliv vstupní prvek (<input>, <select>, <textarea>, který má atribut required:

:required + label::after {
  content: '*';
}

Pseudotřída :optional pak reprezentuje všechny ostatní vstupní prvky.

Podpora :required i :optional je plná.

Pořadí potomků

V této kategorii je možné pseudotřídami vybrat prvního (:first-child), posledního (:last-child), několikátého nebo n-tého (:nth-child()) 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:

/* Liché řádky tabulky: */
tr:nth-child(odd) { … }
tr:nth-child(2n+1) { … }

/* Sudé řádky tabulky: */
tr:nth-child(even) { … }
tr:nth-child(2n) { … }

/* Každá sedmá položka v seznamu: */
li:nth-child(7n) { … }

/* Sedmá položka v seznamu: */
li:nth-child(7) { … }

/* První dva elementy v seznamu */
li:nth-child(-n+2)
/* → -0+2=2, -1+2=1, -2+2=0] */

Podpora základní syntaxe je plná. Horší byste to měli, pokud máte v úmyslu takto stylovat prvky v <select>, 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:

/* Druhá položka v seznamu od konce: */
li:nth-child(2) { … }

/* Každá sedmá položka v seznamu od konce: */
li:nth-child(7n) { … }

/* Liché řádky tabulky: */
tr:nth-child(odd) { … }

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(1).

/* Tučně vysází první odstavec textu v .content */
.content > p:first-child {  
  font-weight: bold;
}

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(1).

/* Tučně vysází první odstavec textu v .content */
.content > p:last-child {  
  font-weight: bold;
}

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(1):nth-last-child(1), 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:

/* Každý lichý obrázek: */
img:nth-of-type(odd) { … }

/* Každý třetí obrázek: */
img:nth-child(3n) { … }

Další pseudotřídy pořadí

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ů:

/* Kombinace selektorů: */
.header h2,
.footer h2,
.side h2 {
  font-size: 2rem;
}

/* Pomocí :is(): */
:is(.header, .footer, .side) h2 {
  font-size: 2rem;
}

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:

/* Silnější specifičnost (0,2,0): */
:is(ul, ol, .list) > [hidden] { … }

/* Slabší specifičnost (0,1,1): */
ul > [hidden], ol > [hidden], .list > [hidden], [hidden] { … } 

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ě (0,2,0).
• V druhém je jedna třída a jeden element. Je to ukecanější, ale má to slabší specificitu (0,1,1).

Podpora je plná (kromě MSIE).

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á.

/* Specifičnost (0,1,1): */
.header h2,
.footer h2,
.side h2 {
  font-size: 2rem;
}

/* Specifičnost (0,1,1): */
:is(.header, .footer, .side) h2 {
  font-size: 2rem;
}

/* Specifičnost (0,0,1): */
:where(.header, .footer, .side) h2 {
  font-size: 2rem;
}

Od Stephanie Eckles jsem si půjčil následující příklad:

:where(ul, ol):where([role="list"]) {
  margin: 0;
  padding: 0;
  list-style: none;
}

: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:

/* Vybere h2 uvnitř .header */
:is(.header) h2 {
  font-size: 2rem;
}

/* Vybere h2, ale ne ty uvnitř .header  */
:not(.header) h2 {
  font-size: 2rem;
}

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á (kromě MSIE).

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…

/* Vybere <a>, které přímo obsahují <img> */
a:has(> img)

… nebo také jako selektor přechozího sourozence:

/* Vybere <h1>, které jsou přímo následovány <table> */
h1:has(+ table)

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 (:dir()) nebo nastavení jazyka (:lang()).

Pseudotřída směru (:dir())

Pseudotřída :dir() umožňuje webařům napsat selektory, které reprezentují prvek na základě směru určeného jazykem dokumentu.

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(ltr) a selektorem atributu [dir=ltr]? Je tam.

Selektor atributu [dir=ltr] se týká pouze daného atributu, pokud je přítomný. Pseudotřída :dir(ltr) 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.

Podpora v prohlížečích je plná (včetně MSIE).

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(cs) a atributovým selektorem [lang|=cs] 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 ([lang|=en]) 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:

/* Styl tlačítka mimo režim celé obrazovky: */
#fs-toggle:not(:fullscreen) {
  background-color: #afa;
}

/* Styl tlačítka v režimu celé obrazovky: */
#fs-toggle:fullscreen {
  background-color: #faa;
}

Pseudotřída modálního stavu – :modal

Tato pseudotřída odpovídá prvku ve stavu, kdy vylučuje veškerou interakci s prvky mimo něj, dokud není interakce s prvkem ukončena. Prostě modální okno.

Pomocí :modal tedy můžeme stylovat nativní modální okna.

Více je na MDN. Podpora je plná.

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 <html>, 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í (aka proměnných):

:root {
  --blue: #007bff;
  --indigo: #6610f2;
}

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 (včetně bílých znaků).
• 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 {text-decoration: none} 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 (řeči) 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á (:playing), je pozastavený (:paused) nebo se ukládá do mezipaměti (:buffering).

Ve specifikaci je těchto pozoruhodných tříd více, jen zatím pražádnou podporu nemají.

Pseudotřída stavu zobrazení prvků :picture-in-picture

Opět jde o velmi zajímavou pseudotřídu pro zobrazení elementu (nejspíš videa) v režimu PiP (picture in picture), tedy překrývající obsah (pseudotřída :picture-in-picture).

Pseudotřída prázdných hodnot – :blank

Umožní nastylovat prázný textový vstup nebo víceřádkový vstup:

textarea:blank {
  border-color: red;
}

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 (:valid a :invalid).

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.