Vzhled

Pseudotřídy

Selektory pro stav prvku: když je na něm hover, když má focus z klávesnice, když je zaškrtnutý, nebo když je lichý v pořadí.

Postavíme seznam věcí na tábor, ve kterém se dá odškrtávat. V náhledu na něj klikejte.

Začátek

Seznam bez stavů

Seznam s checkboxy a tlačítko. Tlačítko vypadá pořád stejně, ať je na něm hover, nebo ne, a odškrtnutá věc vypadá jako neodškrtnutá.

Pseudotřída se píše za selektor s dvojtečkou: .btn:hover. Vybere prvek jen v určitém stavu.

Pseudotřída · 1

:hover

Když je nad tlačítkem kurzor, ztmavne. Uživatel tak pozná, že na něj jde kliknout.

Najeďte v náhledu myší na tlačítko.

Pseudotřída · 2

Klávesnice :focus-visible

Kdo ovládá stránku klávesnicí, skáče mezi prvky Tabulátorem a musí vidět, kde právě je. :focus-visible nakreslí výrazný obrys, ale jen při ovládání klávesnicí, ne po kliknutí myší.

Klikněte do náhledu a mačkejte Tab. Obrys nikdy jen tak nemažte (outline: none), bez něj se na stránce s klávesnicí nedá orientovat.

Pseudotřída · 3

Pořadí :nth-child

Každý lichý řádek seznamu podbarvíme. Delší seznam nebo tabulka se tak lépe čte, oko nesklouzne o řádek vedle.

Další možnosti: even (sudé), 3 (třetí), 3n (každý třetí). Zkratky :first-child a :last-child vyberou první a poslední.

Pseudotřída · 4

Zaškrtnuto :checked

Když je checkbox zaškrtnutý, text vedle něj přeškrtneme a zešedíme. Sbalené věci tak hned zmizí z očí.

Odškrtávejte v náhledu. Znak + znamená „soused hned za“: span, který následuje za zaškrtnutým input.

Responzivita

Dotyk nemá :hover

Na telefonu žádný kurzor není. Po klepnutí na tlačítko tam :hover často „zůstane viset“ a tlačítko je tmavé, dokud neklepnete jinam. Efekt proto zapneme jen na zařízeních, která umí hover.

@media se neptá jen na šířku. (hover: hover) platí pro myš a touchpad, ne pro prst. Proto v náhledu na počítači efekt funguje dál, i když má šířku telefonu.

Shrnutí

Stav vidět na první pohled

Ano

• :hover uvnitř @media (hover: hover)
• :focus-visible s výrazným obrysem
• :nth-child(odd) pro pruhované seznamy a tabulky
• :checked pro reakci na zaškrtnutí

Ne

• outline: none bez náhrady
• důležitá informace dostupná jen přes :hover

Další lekce: Pseudoelementy →