Czym są pseudoklasy CSS?
Pseudoklasa CSS określa szczególny stan elementu HTML. Nie jest zwykłą klasą nadaną w atrybucie class, lecz mechanizmem CSS pozwalającym stylować element zależnie od sytuacji, np. po najechaniu kursorem, kliknięciu albo odwiedzeniu linku.
Pseudoklasy zapisuje się po selektorze z użyciem dwukropka:
selektor:pseudoklasa {
właściwość: wartość;
}
Przykład z linkiem
a:link {
color: red;
}
Selektor a:link oznacza element <a>, który jest nieodwiedzonym odnośnikiem. Fragment :link jest pseudoklasą, a color: red to deklaracja ustawiająca czerwony kolor tekstu.
Częste pseudoklasy linków
:link— link nieodwiedzony,:visited— link odwiedzony,:hover— element po najechaniu kursorem,:active— element aktywny, np. w chwili kliknięcia,:focus— element posiadający fokus, np. pole formularza.
Pseudoklasa a klasa
Zwykła klasa jest nadawana w HTML:
<a class="menu">Start</a>
Styl klasy zapisuje się z kropką:
.menu {
color: red;
}
Pseudoklasa nie wymaga wpisywania jej w HTML. Wynika ze stanu elementu:
a:hover {
color: blue;
}
Ważne na egzaminie
Jeśli w selektorze CSS widzisz zapis z dwukropkiem, np. a:link, p:hover, input:focus, najczęściej chodzi o pseudoklasę. Nie należy mylić jej z klasą .nazwa, identyfikatorem #nazwa ani pseudoelementem, który zwykle zapisuje się podwójnym dwukropkiem, np. ::before.