KWALIFIKACJA INF3 - STYCZEŃ 2016

PYTANIE NR 4.
Chcąc zdefiniować formatowanie tabeli w języku CSS w taki sposób, aby wiersz, który jest aktualnie wskazywany kursorem myszy, został wyróżniony np. innym kolorem, należy zastosować
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Pseudoklasa :hover pozwala ostylować element w momencie, gdy wskaźnik myszy znajduje się nad nim, więc nadaje się do wyróżniania aktualnie wskazywanego wiersza tabeli. :visited dotyczy odwiedzonych linków, a :first-line (pseudoelement) formatuje tylko pierwszą linię tekstu.

Pełne wyjaśnienie:

Prawidłowe wyróżnianie wiersza tabeli podczas wskazywania kursorem realizuje się w CSS przez pseudoklasę :hover. Jest to selektor stanu interakcji użytkownika: reguła zaczyna obowiązywać, gdy wskaźnik myszy znajduje się nad danym elementem. W praktyce zapisuje się to np. jako tr:hover (dla całego wiersza) lub td:hover (dla komórki), a następnie ustawia tło, kolor tekstu, obramowanie itp.

Dlaczego pozostałe propozycje nie pasują:

  • "pseudoklasę :visited" stosuje się do linków (elementów odsyłaczy) w stanie "odwiedzony". Nie opisuje najechania kursorem na wiersz tabeli, więc nie rozwiązuje problemu wyróżnienia elementu wskazywanego myszą.
  • "pseudoelement :first-line" (w nowoczesnym zapisie zwykle spotkasz ::first-line) dotyczy typografii pierwszej linii tekstu w elemencie. To nie jest stan interakcji kursora, tylko wybór fragmentu renderowanego tekstu. Nie pozwala więc na efekt "podświetl wiersz, gdy najadę myszą".
  • "nowy selektor klasy dla wiersza tabeli" może być użyteczne, gdy chcesz ręcznie oznaczać wybrane wiersze (np. klasą .aktywny), ale samo w sobie nie odpowiada na warunek "aktualnie wskazywany kursorem". Do automatycznej reakcji na najechanie służy właśnie pseudoklasa :hover.

Wskazówka egzaminacyjna: jeśli w treści pojawiają się słowa typu "po najechaniu", "wskazywany kursorem", "po zatrzymaniu myszy", to najczęściej chodzi o :hover. Jeśli mowa o linkach odwiedzonych — o :visited. Jeśli o fragmencie tekstu (pierwsza linia, pierwsza litera) — o pseudoelementach jak ::first-line.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
:hover to pseudoklasa CSS, która dopasowuje element, gdy użytkownik najedzie na niego wskaźnikiem myszy. Używa się jej do efektów interaktywnych, np. zmiany tła wiersza tabeli, podświetlenia przycisku lub linku podczas najechania.
Najczęściej stosuje się selektor wiersza z pseudoklasą :hover, np. tr:hover, i zmienia właściwości takie jak background-color. Dzięki temu podświetlenie działa automatycznie bez dopisywania klas w HTML.
:visited dotyczy stanu odnośnika, który był już odwiedzony (historia przeglądarki). Nie opisuje najechania kursorem ani nie jest związany z wierszami tabeli, dlatego nie rozwiązuje problemu "aktualnie wskazywany kursorem".
::first-line to pseudoelement formatujący pierwszą linię tekstu w elemencie (np. inny krój, kolor). Nie jest to stan interakcji użytkownika, więc nie zadziała jako mechanizm podświetlania wiersza po najechaniu myszą.
Pseudoklasa (np. :hover) opisuje stan elementu lub warunek dopasowania. Pseudoelement (np. ::first-line) wskazuje część elementu lub "wirtualny" fragment. To częsty temat egzaminacyjny, bo zapisy są podobne.
Nie zawsze. Jeśli efekt ma wynikać z interakcji (najechanie myszą), CSS oferuje pseudoklasy, np. :hover. Klasy w HTML są przydatne, gdy stan ma być trwały (np. "wybrany wiersz"), często ustawiany skryptem lub logiką aplikacji.
Najczęściej zmienia się background-color (tło), czasem color (kolor tekstu) i cursor. W UI aplikacji webowej spotyka się też delikatne obramowanie lub cień, ale trzeba uważać, by nie pogorszyć czytelności danych w tabeli.
Na ekranach dotykowych nie ma klasycznego "najechania myszą", więc zachowanie :hover bywa ograniczone lub zależne od przeglądarki (np. aktywacja po tapnięciu). W projektach responsywnych warto testować tabelę na telefonie i rozważyć alternatywne wzorce UI.
Najpierw rozpoznaj, czy treść mówi o stanie (wtedy pseudoklasy jak :hover), czy o fragmencie tekstu (pseudoelementy jak ::first-line). Jeśli pojawiają się linki i historia, myśl o :visited. To pomaga nie mylić pojęć.
Warto kojarzyć m.in. :active (w trakcie kliknięcia), :focus (element ma fokus, np. pole formularza), a także selektory strukturalne typu :first-child. Często pojawiają się w zadaniach o interakcjach i formatowaniu formularzy.
info

Około 55% zdających odpowiada poprawnie na to pytanie. średnie

Specjaliści zwracają uwagę: "Pseudoklasa :hover pozwala ostylować element w momencie, gdy wskaźnik myszy znajduje się nad nim, więc nadaje się do wyróżniania aktualnie wskazywanego wiersza tabeli."

Źródła:

  • MDN Web Docs: ":hover" — https://developer.mozilla.org/en-US/docs/Web/CSS/:hover (dostęp: 2026-03-01)
  • MDN Web Docs: ":visited" — https://developer.mozilla.org/en-US/docs/Web/CSS/:visited (dostęp: 2026-03-01)
  • MDN Web Docs: "::first-line" — https://developer.mozilla.org/en-US/docs/Web/CSS/::first-line (dostęp: 2026-03-01)

Materiały:

  • Dokumentacja MDN: pseudoklasy i pseudoelementy CSS
  • Ćwiczenia: stylowanie tabel i selektory złożone w CSS
  • Specyfikacja W3C Selectors (sekcje dotyczące :hover i innych stanów)

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego