Kurs HTML

Wprowadzenie: Stylizowanie stanów elementów

Pseudoklasy w CSS pozwalają stylizować elementy nie na podstawie ich typu, atrybutów czy pozycji w drzewie DOM, ale na podstawie ich **stanu** lub **interakcji użytkownika**.

Zapisuje się je, dodając dwukropek (:) i nazwę pseudoklasy do selektora (np. a:hover).

W tej lekcji skupimy się na podstawowych i najczęściej używanych pseudoklasach, głównie związanych z linkami i elementami interaktywnymi.

Pseudoklasy linków: :link i :visited

• :link: Wybiera linki (elementy <a> z atrybutem href), które **nie zostały jeszcze odwiedzone** przez użytkownika.
• :visited: Wybiera linki, które **zostały już odwiedzone** przez użytkownika.

Ze względów prywatności, przeglądarki mocno ograniczają, jakie style można zastosować za pomocą :visited. Zazwyczaj można bezpiecznie zmieniać tylko właściwości związane z kolorem (color, background-color, border-color, outline-color). Nie można np. zmieniać rozmiaru czcionki, dodawać tła obrazkowego ani używać pseudoelementów ::before/::after dla odwiedzonych linków.

<a href="https://www.google.com">Google (prawdopodobnie odwiedzony)</a><br>
<a href="/nieistniejaca-strona-xyz">Nieistniejąca strona (prawdopodobnie nieodwiedzony)</a>Kopiuj

/* Styl dla nieodwiedzonych linków */
a:link {
  color: blue;
  text-decoration: none; /* Usuń domyślne podkreślenie */
}

/* Styl dla odwiedzonych linków */
a:visited {
  color: purple;
}
Kopiuj

W powyższym przykładzie, nieodwiedzone linki będą niebieskie i bez podkreślenia, a odwiedzone będą fioletowe.

Pseudoklasy interakcji: :hover, :active, :focus

• :hover: Wybiera element, nad którym użytkownik **aktualnie trzyma kursor myszy**. Działa na większości elementów, nie tylko na linkach.
• :active: Wybiera element w momencie, gdy jest **aktywowany** przez użytkownika (np. kliknięcie linku lub przycisku - od momentu wciśnięcia przycisku myszy do jego zwolnienia).
• :focus: Wybiera element, który aktualnie **ma fokus** (jest aktywny i gotowy do interakcji, np. pole formularza, w którym można pisać, lub link/przycisk wybrany za pomocą klawisza Tab). Fokus można nadać elementom interaktywnym (linki, przyciski, pola formularzy) oraz elementom z atrybutem tabindex.

<a href="#" class="interactive-link">Najedź na mnie lub kliknij</a>
<button class="interactive-button">Kliknij mnie</button>
<input type="text" class="interactive-input" placeholder="Kliknij lub użyj Tab">Kopiuj

/* Styl linku po najechaniu myszą */
a.interactive-link:hover {
  color: red;
  text-decoration: underline;
}

/* Styl linku podczas kliknięcia */
a.interactive-link:active {
  color: orange;
}

/* Styl linku, gdy ma fokus (np. po użyciu Tab) */
a.interactive-link:focus {
  outline: 2px solid blue; /* Dodaj widoczny obrys fokusu */
}

/* Styl przycisku po najechaniu */
.interactive-button:hover {
  background-color: lightgray;
}

/* Styl przycisku podczas kliknięcia */
.interactive-button:active {
  background-color: gray;
  transform: translateY(1px); /* Lekkie przesunięcie w dół */
}

/* Styl przycisku, gdy ma fokus */
.interactive-button:focus {
  box-shadow: 0 0 5px rgba(0, 0, 255, 0.5); /* Dodaj cień fokusu */
}

/* Styl pola input, gdy ma fokus */
.interactive-input:focus {
  border-color: blue;
  background-color: lightyellow;
}
Kopiuj

Ważna kolejność (LVHA): Aby pseudoklasy linków i interakcji działały poprawnie razem, zaleca się definiowanie ich w następującej kolejności w arkuszu CSS: Link, Visited, Hover, Active (mnemonik: LoVe HAte). Pseudoklasę :focus często umieszcza się razem z :hover lub po :active.

/* Zalecana kolejność LVHA dla linków */
a:link    { color: blue; }
a:visited { color: purple; }
a:hover   { color: red; }
a:active  { color: orange; }

/* Można łączyć :hover i :focus dla spójnego stylu */
a:hover, a:focus {
    text-decoration: underline;
}
Kopiuj