10.1 Pseudoklasy
Pseudoklasy i pseudoelementy w HTML i CSS pozwalają stylować elementy na podstawie ich stanu lub zawartości, bez potrzeby dodawania dodatkowych klas lub zmiany struktury dokumentu HTML. Dostarczają świetne narzędzia do tworzenia interaktywnych i estetycznych stron internetowych.
Pseudoklasy są stosowane do elementów na podstawie ich stanu lub pozycji w strukturze dokumentu. Pomagają stylizować elementy w różnych sytuacjach, takich jak najechanie kursorem, skupienie lub zaznaczenie elementów. Pseudoklasy zaczynają się od dwukropka (:).
Najprostsze pseudoklasy:
Pseudoklasa :hover jest stosowana do elementu, gdy użytkownik najedzie na niego kursorem.
<button type="button">Przycisk</button>
button:hover {
color: red;
}
Pseudoklasa :focus jest stosowana do elementu, gdy uzyskuje on focus, np. podczas kliknięcia w pole tekstowe.
<input type="text">
input:focus {
outline-color: blue;
}
Pseudoklasa :active jest stosowana do elementu, gdy jest aktywny, np. podczas kliknięcia linku lub przycisku.
<button type="button">Przycisk</button>
button:active {
background-color: green;
}
Pseudoklasa :visited jest stosowana do linków, które użytkownik już odwiedził.
<a href="#">Link</a>
a:visited {
color: purple;
}
10.2 Pseudoelementy
Pseudoelementy pozwalają stylizować części elementów, które nie są osobnymi elementami HTML. Zaczynają się od dwóch dwukropków (::). Pseudoelementy są używane do tworzenia i stylizacji zawartości przed lub po elemencie, zaznaczania pierwszego wiersza lub pierwszej litery elementu i innych zadań.
Najprostsze pseudoelementy:
Pseudoelement ::before wstawia zawartość przed treścią elementu.
<p>Mam na imię Stefan.</p>
p::before {
content: "Cześć! ";
color: blue;
}
Pseudoelement ::after wstawia zawartość po treści elementu.
<p>Uwaga!</p>
p::after {
content: " Dziękuję za uwagę!";
color: red;
}
Pseudoelement ::first-line jest stosowany do pierwszej linii elementu. Pozwala stylizować tylko pierwszą linię tekstu.
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
p::first-line {
font-weight: bold;
color: green;
}
Pseudoelement ::selection jest stosowany do zaznaczonego przez użytkownika tekstu.
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
::selection {
background-color: blue;
color: yellow;
}
Spróbuj zaznaczyć tekst w wyniku.
10.3 Przykłady użycia pseudoelementów
Pseudoklasy i pseudoelementy w HTML i CSS dostarczają niesamowitych możliwości do stylizacji elementów na podstawie ich stanu lub zawartości. Pozwalają na tworzenie bardziej interaktywnych i wizualnie atrakcyjnych stron internetowych bez zmiany struktury HTML.
Przykład 1: Wstawienie ikony przed tekstem linku
<html>
<head>
<style>
a::before {
content: "🔗";
margin-right: 5px;
}
</style>
</head>
<body>
<a href="#">To jest link z ikoną</a>
</body>
</html>
Przykład 2: Dodanie stylizowanego bloku po akapicie
<html>
<head>
<style>
p::after {
content: "🌟";
display: block;
text-align: center;
margin-top: 10px;
}
</style>
</head>
<body>
<p>To jest akapit tekstu.</p>
</body>
</html>
Kombinowanie
Pseudoklasy i pseudoelementy można łączyć, aby tworzyć złożone i potężne style.
Przykład: Stylizacja zaznaczonego tekstu wewnątrz linku przy najechaniu
<html>
<head>
<style>
a:hover::selection {
background-color: lightblue;
color: navy;
}
</style>
</head>
<body>
<a href="#">Zaznacz ten tekst, a potem najedź na niego myszką.</a>
</body>
</html>
GO TO FULL VERSION