Pseudoklasy i pseudoelementy CSS — hover, focus i before

Czasem element trzeba ostylować nie według tego, czym jest, lecz w jakim jest stanie: najechany myszą, aktywny, zaznaczony. Od tego są pseudoklasy (jeden dwukropek, :hover). Pseudoelementy (dwa dwukropki, ::before) z kolei tworzą dodatkowy, wirtualny element, np. ozdobny znak przed pozycją listy — bez zmiany HTML. Na lekcji uczniowie używają obu rodzajów na przycisku, polu tekstowym, liście i polu wyboru.

Scenariusz jest przeznaczony na 45 minut dla klasy znającej selektory CSS — na przykład po lekcji o selektorach.

Przygotowanie stanowisk

Potrzebne są przeglądarka z narzędziami deweloperskimi (F12) i edytor tekstu. Rozpakuj pakiet z sekcji materiałów do osobnego folderu. HTML w obu folderach jest taki sam i jej nie zmieniasz — pracujesz w start/style.css. Po zapisaniu pliku odśwież stronę. Wymiary elementów sprawdzisz w narzędziach deweloperskich (zakładka Elements, panel Computed). Gotowe rozwiązanie jest w folderze rozwiazanie. Internet nie jest wymagany.

Cele i plan lekcji

Po zajęciach uczeń potrafi:

• użyć pseudoklas stanu: :hover, :focus i :checked;
• wstawić ozdobną treść pseudoelementami ::before i ::after z właściwością content;
• odróżnić pseudoklasę (stan istniejącego elementu) od pseudoelementu (nowy element wirtualny);
• zbadać style stanów w narzędziach deweloperskich.

Pseudoklasy

Pseudoklasa dopisuje do selektora stan, w którym element ma otrzymać styl:

• :hover — wskaźnik myszy znajduje się nad elementem (na ekranach dotykowych działa niepewnie, dlatego nie wolno na niej opierać jedynego sposobu obsługi);
• :focus — element jest aktywny (np. pole, do którego wpisujemy tekst, albo przycisk wybrany klawiaturą). Nigdy nie usuwaj konturu fokusa bez zastąpienia go czymś widocznym — osoby korzystające z klawiatury straciłyby orientację;
• :checked — pole wyboru lub przycisk radio jest zaznaczony.

Selektor #zgoda:checked + span czyta się: „span stojący bezpośrednio po zaznaczonym #zgoda”.

Pseudoelementy

::before i ::after tworzą wirtualny element wewnątrz wybranego elementu: odpowiednio na jego początku i końcu. Wymagają właściwości content (nawet pustej: content: ""). Treść wstawiona przez content nie jest częścią HTML, więc nie nadaje się do informacji ważnych dla użytkownika (czytniki ekranu mogą ją pominąć lub odczytać różnie). Znak \2714 to zapis kodu Unicode znaku „✔” w CSS. Pseudoelement zapisujemy z podwójnym dwukropkiem (::before) — pojedynczy to starszy zapis, nadal działający.

Style pseudoklas stanów można podejrzeć w narzędziach deweloperskich: w panelu Styles przycisk :hov pozwala wymusić :hover lub :focus bez używania myszy.

Zadania

Zadanie 1. hover i focus. Przyciskowi .przycisk zmień tło na #1d4ed8 po najechaniu (:hover), a polu #pole nadaj po aktywowaniu pomarańczowy kontur 3 px #f59e0b (:focus). Sprawdź w F12 (:hov) i myszą.

Zadanie 2. before i after. Przed każdym li w .lista wstaw znak ✔ w kolorze #166534 (::before, kod \2714), a po ostatnim li — tekst „ (ostatni)” w kolorze #64748b (::after).

Zadanie 3. checked. Gdy pole #zgoda jest zaznaczone, następny po nim element span ma być pogrubiony. Zaznacz i odznacz pole, sprawdź efekt.

Dla chętnych: dodaj transition: background 0.2s do przycisku i zaobserwuj płynną zmianę koloru po najechaniu.

Rozwiązanie i wyniki

body {
  margin: 0;
  padding: 16px;
  font-family: sans-serif;
}
.przycisk {
  display: inline-block;
  padding: 8px 16px;
  background: #1e3a8a;
  color: #ffffff;
  text-decoration: none;
}
.przycisk:hover {
  background: #1d4ed8;
}
#pole:focus {
  outline: 3px solid #f59e0b;
}
.lista li::before {
  content: "\2714  ";
  color: #166534;
}
.lista li:last-child::after {
  content: " (ostatni)";
  color: #64748b;
}
#zgoda:checked + span {
  font-weight: bold;
}

Pomiary w przeglądarce: po najechaniu kursorem tło przycisku zmienia się z rgb(30, 58, 138) na rgb(29, 78, 216); po aktywowaniu pola #pole kontur ma styl 3px solid rgb(245, 158, 11); każdy li ma w ::before treść "✔ " (kolor rgb(22, 101, 52)), a ostatni dodatkowo " (ostatni)" w ::after, której pierwsze i drugie li nie mają (content równa się none); po zaznaczeniu #zgoda element #info ma pogrubienie 700, a po odznaczeniu — 400.

Typowe błędy

Pytania kontrolne i punktacja

1. Czym różni się pseudoklasa od pseudoelementu?
2. Co robi selektor #zgoda:checked + span?
3. Dlaczego nie należy usuwać konturu fokusa?

Odpowiedzi: Pseudoklasa opisuje stan istniejącego elementu (:hover), a pseudoelement tworzy dodatkowy, wirtualny element (::before). Wybiera span stojący bezpośrednio po zaznaczonym polu #zgoda. Bo osoby korzystające z klawiatury tracą wtedy informację, który element jest aktywny.

Proponowana punktacja (razem 10 punktów): zadanie 1 — :hover 1 pkt, :focus 1 pkt, sprawdzenie w F12 1 pkt; zadanie 2 — ::before z content 1 pkt, ::after na ostatnim li 2 pkt; zadanie 3 — :checked + span 2 pkt; wyjaśnienie różnicy pseudoklasa/pseudoelement 1 pkt; poprawny zapis CSS 1 pkt. Zadanie dla chętnych nie jest wymagane do pełnej oceny.

Materiały do pobrania

• Pakiet CSS: materiały do lekcji, rozwiązanie i karta pracy
• Karta pracy ucznia — otwórz i wydrukuj

Rozpakuj ZIP przed otwarciem plików. Materiały są dostępne bez logowania; publiczne rozwiązanie służy nauce i samodzielnemu sprawdzeniu, a nie poufnemu sprawdzianowi.

Co dalej?

Następny krok to animacje i przejścia (transition), które uatrakcyjniają zmiany stanu. Ten materiał rozwija dział o selektorach i stanach w kursie CSS w TablicaPro, gdzie znajdziesz prezentacje, ćwiczenia i testy do prowadzenia lekcji.

Źródła techniczne: pseudoklasy w MDN oraz pseudoelementy. Zobacz też lekcję o selektorach.