Wprowadzenie

Pseudoklasy

Pseudoklasy pozwalają stosować klasy warunkowo, w zależności od stanu elementu lub jego położenia w strukturze dokumentu.

Pseudoklasy dla stanu elementu

Poniższe pseudoklasy pozwalają na modyfikację wiglądu klasy w zaleźności od jego stanu.

Prefix	Stan elementu
`hover:`	Stosuje klasę po najechaniu kursorem na element.
`focus:`	Stosuje klasę, gdy element posiada fokus, np. po kliknięciu lub przejściu klawiszem Tab.
`active:`	Stosuje klasę podczas aktywacji elementu, najczęściej w momencie przytrzymania przycisku myszy.
`focus-within:`	Stosuje klasę, gdy element lub którykolwiek z jego potomków posiada fokus.
`focus-visible:`	Stosuje klasę, gdy fokus powinien być widoczny dla użytkownika, np. podczas nawigacji klawiaturą.
`required:`	Stosuje klasę do pól formularza oznaczonych jako wymagane.
`disabled:`	Stosuje klasę do elementów wyłączonych i niedostępnych do interakcji.
`checked:`	Stosuje klasę do zaznaczonych pól typu checkbox, radio oraz innych elementów obsługujących stan zaznaczenia.

<div class="d-flex flex-column md:flex-row gap-4">
    <div class="b">block</div>
    <div class="b">block</div>
    <div class="b">block</div>
</div>

Pseudoklasy położenia elementu

Prefiks	Opis
`first:`	Stosuje klasę tylko do pierwszego elementu wśród rodzeństwa.
`not-first:`	Stosuje klasę do wszystkich elementów z wyjątkiem pierwszego.
`last:`	Stosuje klasę tylko do ostatniego elementu wśród rodzeństwa.
`even:`	Stosuje klasę do elementów znajdujących się na parzystych pozycjach.
`odd:`	Stosuje klasę do elementów znajdujących się na nieparzystych pozycjach.

<div class="d-flex flex-column gap-4">
    <div class="d-flex first:bgcolor-black even:color-black b">czarne tło dla pierwszego</div>
    <div class="d-flex first:bgcolor-black even:color-black b">czarny tekst dla parzystych</div>
    <div class="d-flex first:bgcolor-black even:color-black b">block</div>
    <div class="d-flex first:bgcolor-black even:color-black b">czarny tekst dla parzystych</div>
</div>