Pseudoklasy CSS pozwalają na stylizowanie elementów na podstawie ich stanu lub położenia w strukturze dokumentu. Dzięki pseudoklasom możemy zmieniać wygląd elementów w zależności od interakcji użytkownika (np. najechanie myszką) lub ich położenia (np. pierwszy lub ostatni element w liście). Poniżej omówię podstawowe pseudoklasy CSS i pokażę, jak je stosować w praktyce.
Co to są pseudoklasy CSS?
Przede wszystkim pseudoklasy to słowa kluczowe dodawane do selektorów, które określają specjalny stan wybranych elementów. Dodatkowo pseudoklasy są poprzedzone dwukropkiem :. Co więcej dzięki nim możemy stylizować elementy w sposób dynamiczny, bez konieczności modyfikowania HTML-a.
Najczęściej używane pseudoklasy CSS
Pseudoklasy dynamiczne
:hover
:hover – stylizuje elementy, gdy użytkownik najedzie na nie myszką.
a:hover {
color: red;
}:active
:active – stylizuje elementy, gdy są aktywowane, na przykład podczas klikania.
a:active {
color: blue;
}:focus
:focus – stylizuje elementy, które mają fokus, na przykład po kliknięciu na pole tekstowe.
input:focus {
border-color: green;
}:visited
:visited – stylizuje linki, które zostały odwiedzone.
a:visited {
color: purple;
}:link
:link – stylizuje linki, które nie zostały odwiedzone.
a:link {
color: blue;
}Pseudoklasy strukturalne
:first-child
:first-child – stylizuje pierwszy element wśród rodzeństwa.
p:first-child {
font-weight: bold;
}:last-child
:last-child – stylizuje ostatni element wśród rodzeństwa.
p:last-child {
font-style: italic;
}:nth-child(n)
:nth-child(n) – stylizuje elementy na podstawie ich indeksu wśród rodzeństwa. n może być liczbą, słowem kluczowym (np. odd lub even), lub wyrażeniem an+b.
li:nth-child(2) {
color: green;
}:nth-of-type(n)
:nth-of-type(n) – stylizuje elementy na podstawie ich indeksu wśród rodzeństwa tego samego typu.
li:nth-of-type(odd) {
background-color: #f0f0f0;
}:first-of-type
:first-of-type – stylizuje pierwszy element wśród rodzeństwa tego samego typu.
h2:first-of-type {
color: red;
}:last-of-type
:last-of-type – stylizuje ostatni element wśród rodzeństwa tego samego typu.
h2:last-of-type {
color: blue;
}Inne przydatne pseudoklasy
:not(selector)
:not(selector) – stylizuje elementy, które nie pasują do danego selektora.
button:not(.primary) {
background-color: grey;
}:disabled
:disabled – stylizuje elementy formularzy, które są wyłączone.
input:disabled {
background-color: lightgrey;
}:checked
:checked – stylizuje elementy formularzy, które są zaznaczone (np. checkboxy, radio buttony).
input:checked {
background-color: yellow;
}Przykłady praktyczne
Stylizowanie przycisku na różnych etapach interakcji
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pseudoklasy CSS - Przykład</title>
<style>
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: cornflowerblue;
color: white;
}
button:hover {
background-color: dodgerblue;
}
button:active {
background-color: blue;
}
button:focus {
outline: 2px solid blue;
}
</style>
</head>
<body>
<button>Przycisk</button>
</body>
</html>Stylizowanie zagnieżdżonych elementów listy
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pseudoklasy CSS - Przykład</title>
<style>
ul li:first-child {
font-weight: bold;
}
ul li:last-child {
font-style: italic;
}
ul li:nth-child(odd) {
background-color: #f0f0f0;
}
</style>
</head>
<body>
<ul>
<li>Pierwszy element</li>
<li>Drugi element</li>
<li>Trzeci element</li>
<li>Czwarty element</li>
<li>Piąty element</li>
</ul>
</body>
</html>- Pierwszy element
- Drugi element
- Trzeci element
- Czwarty element
- Piąty element
Pseudoklasy CSS – podsumowanie
Podsumowując pseudoklasy CSS ułatwiają stylizację elementów na podstawie ich stanu lub położenia. Dodatkowo dzięki nim możemy tworzyć bardziej interaktywne i dynamiczne strony internetowe bez konieczności modyfikowania struktury HTML. Dlatego warto eksperymentować z różnymi pseudoklasami, aby w pełni wykorzystać ich możliwości i dostosować wygląd elementów do swoich potrzeb. Co więcej praktyka i testowanie w różnych przeglądarkach są kluczowe, aby upewnić się, że Twoje style działają poprawnie na wszystkich urządzeniach i platformach.