Pseudoklasy linków w CSS

Słownik kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

Czym są pseudoklasy linków w CSS?

Pseudoklasy linków pozwalają ustawić różny wygląd elementu <a> w zależności od jego stanu. Dzięki nim można osobno zdefiniować styl dla linku nieodwiedzonego, odwiedzonego, po najechaniu kursorem i aktywnego.

Najczęściej używane pseudoklasy to:

  • a:link – link nieodwiedzony
  • a:visited – link odwiedzony
  • a:hover – link, na który użytkownik najechał myszą
  • a:active – link aktywny, czyli klikany

Przykład zastosowania

Jeśli chcemy, aby linki nieodwiedzone były żółte, a odwiedzone zielone, zapis wygląda tak:

a:link {
  color: yellow;
}

a:visited {
  color: green;
}

Znaczenie w zadaniach egzaminacyjnych

W pytaniach egzaminacyjnych często trzeba rozpoznać, która pseudoklasa odpowiada za dany stan linku:

  • nieodwiedzony → :link
  • odwiedzony → :visited

To oznacza, że poprawna odpowiedź musi przypisywać właściwy kolor do właściwego selektora.

Kolejność zapisu

Przy stylowaniu linków często stosuje się kolejność:

  • :link
  • :visited
  • :hover
  • :active

Pomaga to uniknąć nadpisywania stylów i błędów w interpretacji. Często zapamiętuje się to skrótem LVHA (Link, Visited, Hover, Active).

Ważna uwaga

Pseudoklasa :hover nie oznacza linku odwiedzonego, tylko stan po najechaniu kursorem. Dlatego nie można jej używać zamiast :visited.

Podsumowanie

Aby ustawić kolor linków:

  • nieodwiedzonych – użyj a:link
  • odwiedzonych – użyj a:visited

Przykład poprawnego rozwiązania:

a:link { color: yellow; }
a:visited { color: green; }