KWALIFIKACJA INF3 - CZERWIEC 2018

PYTANIE NR 7.
Jak zdefiniować w języku CSS formatowanie hiperłącza, żeby nieodwiedzony link był w kolorze żółtym, a odwiedzony w kolorze zielonym?
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Pseudo-klasy :link i :visited dotyczą odpowiednio linku nieodwiedzonego i odwiedzonego. Aby nadać im różne kolory, definiuje się dwie reguły dla selektora a: pierwszą z a:link ustawiającą żółty, i drugą z a:visited ustawiającą zielony. Pozostałe opcje mylą stany lub składnię.

Pełne wyjaśnienie:

W CSS wygląd hiperłączy najczęściej ustawia się przez pseudo-klasy stanu linku. Kluczowe są:

  • :link – dotyczy odnośników, które nie były jeszcze odwiedzone (w historii przeglądarki),
  • :visited – dotyczy odnośników już odwiedzonych.

Jeśli w treści pytania wymagane jest, aby nieodwiedzony link był żółty, a odwiedzony zielony, to należy zapisać dwie reguły:

  • a:link { color: yellow; } – ustawia kolor tekstu linku nieodwiedzonego na żółty,
  • a:visited { color: green; } – ustawia kolor tekstu linku odwiedzonego na zielony.

Dlaczego pozostałe odpowiedzi są błędne?

  • Opcje z :hover opisują stan najechania kursorem. To inny mechanizm niż "odwiedzony/nieodwiedzony", więc nie spełniają wymagań pytania.
  • Selektor a.link odnosi się do elementu a z klasą link (atrybut class), a nie do stanu odwiedzenia, więc nie jest równoważny a:link.
  • Odpowiedź zamieniająca kolory między :visited i :link odwraca warunek: wtedy odwiedzony byłby żółty, a nieodwiedzony zielony.

W praktyce warto pamiętać o zasadzie kolejności stylów linków (LVHA: link, visited, hover, active), szczególnie gdy w arkuszu stylów definiuje się także zachowanie po najechaniu i kliknięciu.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Pseudo-klasa :link wybiera odnośniki, które są nieodwiedzone (nie występują w historii odwiedzin przeglądarki). Najczęściej stosuje się ją jako a:link, aby ustawić wygląd domyślny nowych linków, np. kolor lub podkreślenie.
:visited dotyczy odnośników już odwiedzonych przez użytkownika. Używa się jej jako a:visited, aby wizualnie odróżnić linki prowadzące do stron, które użytkownik już otwierał. Pamiętaj, że część właściwości może być ograniczona ze względów prywatności.
:hover działa tylko w momencie najechania kursorem na element (stan chwilowy), a :visited zależy od historii przeglądarki (stan trwały dla danego użytkownika). Dlatego :hover nie zastępuje wymagań typu "odwiedzony/nieodwiedzony".
Definiujesz dwie reguły: a:link dla nieodwiedzonego i a:visited dla odwiedzonego. Przykład: a:link { color: yellow; } oraz a:visited { color: green; }. To bezpośrednio mapuje wymagane stany na odpowiednie kolory.
a.link wybiera element a z klasą CSS link (np. <a class="link">). Natomiast a:link to pseudo-klasa stanu nieodwiedzonego. To zupełnie inne kryteria selekcji, dlatego nie można ich stosować zamiennie w zadaniach o stanach linków.
:active opisuje stan elementu w trakcie aktywacji, zwykle podczas kliknięcia (między wciśnięciem a puszczeniem przycisku myszy). Stosuje się go, aby dać użytkownikowi informację zwrotną o kliknięciu, np. chwilową zmianę koloru lub tła linku.
LVHA to praktyczna kolejność definiowania stylów: :link, :visited, :hover, :active. Jeśli te reguły się nakładają, kolejność może wpływać na to, co "wygra" w kaskadzie. Na egzaminie pomaga to uniknąć sytuacji, że :hover przykryje :visited.
Nie zawsze. Przeglądarki mogą ograniczać, jakie właściwości są stosowane w a:visited, aby utrudnić śledzenie historii użytkownika przez strony WWW. W praktyce najbezpieczniej zakładać, że podstawowe różnice wizualne (np. kolor tekstu) są typowym zastosowaniem, ale nie każda właściwość zadziała.
Najczęstsze pomyłki to: użycie :hover zamiast stanu odwiedzenia, odwrócenie kolorów między :link i :visited, oraz mylenie a.link (klasa) z a:link (pseudo-klasa). Warto czytać uważnie, o jaki stan pyta zadanie.
Najlepiej zrobić krótkie ćwiczenie: utwórz stronę z kilkoma odnośnikami i dopisz reguły dla a:link, a:visited, a:hover i a:active. Potem sprawdź działanie w przeglądarce. Utrwala to zarówno składnię, jak i rozumienie stanów linku.
info

To pytanie poprawnie rozwiązuje 62% zdających egzamin. średnie

Według specjalistów z branży: "Pseudo-klasy :link i :visited dotyczą odpowiednio linku nieodwiedzonego i odwiedzonego."

Źródła:

  • MDN Web Docs: ":link" (CSS) — https://developer.mozilla.org/en-US/docs/Web/CSS/:link — dostęp 2026-02-18
  • MDN Web Docs: ":visited" (CSS) — https://developer.mozilla.org/en-US/docs/Web/CSS/:visited — dostęp 2026-02-18
  • W3C: Selectors Level 4 (Working Draft/Recommendation page) — sekcja o pseudo-classes — https://www.w3.org/TR/selectors-4/ — dostęp 2026-02-18

Materiały:

  • Dokumentacja MDN: pseudo-klasy :link, :visited, :hover, :active
  • Specyfikacja selektorów CSS (Selectors Level 4) – rozdział o pseudo-klasach
  • Ćwiczenia praktyczne: tworzenie prostych stron HTML i stylowanie odnośników w CSS

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego