8.1 Podstawowe koncepcje
Kombinowanie pseudoklas i pseudoelementów w CSS pozwala na tworzenie mocnych i elastycznych selektorów do stylizacji elementów w zależności od ich stanu, struktury i zawartości. To otwiera wiele możliwości na tworzenie złożonych i dynamicznych stylów, które ulepszają interfejs użytkownika i doświadczenie w interakcji z witryną.
Podstawy kombinowania
Pseudoklasy
Pseudoklasy oznaczane są jednym dwukropkiem (:) i stosowane do elementów w zależności od ich stanu lub pozycji. Na przykład:
:hover— stosowany przy najechaniu kursorem na element:first-child— wybiera pierwszy element potomny rodzica
Pseudoelementy
Pseudoelementy oznaczane są dwoma dwukropkami (::) i używane do stylizacji części elementów lub dodawania treści. Na przykład:
::before— dodaje treść przed elementem::first-letter— stylizuje pierwszą literę elementu
Kombinowanie
Pseudoklasy i pseudoelementy można łączyć, aby tworzyć złożone selektory, które pozwalają stosować style do elementów w zależności od ich stanu i struktury.
Składnia:
selektor:pseudoklasa::pseudoelement {
właściwości: wartości;
}
8.2 Kombinowanie dla interaktywności
Przykład 1: Stylizacja pierwszej litery przy najechaniu
W tym przykładzie pierwsza litera akapitu powiększa się i zmienia kolor na czerwony przy najechaniu kursorem na akapit:
/* Stylizacja pierwszej litery akapitu przy najechaniu kursorem */
p:hover::first-letter {
font-size: 2em;
color: #e74c3c;
}
<p>Hover over this paragraph to see the first letter change.</p>
Przykład 2: Dodawanie zawartości przed linkiem przy fokusie
W tym przykładzie ikona jest dodawana przed linkiem i zmienia kolor na niebieski, kiedy link dostaje fokus:
/* Dodawanie ikony przed linkiem przy fokusie */
a:focus::before {
content: "🔗 ";
color: #3498db;
}
8.3 Kombinowanie dla stylizacji struktury
Przykład 3: Stylizacja pierwszego akapitu wewnątrz div z dodaniem zawartości
W tym przykładzie pierwsza linia pierwszego akapitu wewnątrz div jest wyboldowana i zmienia kolor na zielony:
/* Stylizacja pierwszej linii pierwszego akapitu wewnątrz div */
div p:first-child::first-line {
font-weight: bold;
color: #2ecc71;
}
Przykład 4: Dodawanie elementu dekoracyjnego po ostatnim elemencie listy
W tym przykładzie element dekoracyjny jest dodawany po ostatnim elemencie listy i zmienia kolor na czerwony:
/* Dodawanie elementu dekoracyjnego po ostatnim elemencie listy */
ul li:last-child::after {
content: "❦";
display: inline-block;
margin-left: 10px;
color: #e74c3c;
}
8.4 Kombinowanie dla złożonych warunków
Przykład 5: Stylizacja parzystych elementów listy przy najechaniu
W tym przykładzie parzyste elementy listy otrzymują jasnoszare tło i niebieski kolor tekstu przy najechaniu kursorem:
/* Stylizacja parzystych elementów listy przy najechaniu kursorem */
ul li:nth-child(even):hover {
background-color: #f0f0f0;
color: #3498db;
}
Przykład 6: Stylizacja aktywnych linków, które już były odwiedzone
W tym przykładzie linki, które były odwiedzone i są w aktywnym stanie, zmieniają kolor na pomarańczowy i są podkreślone:
/* Stylizacja aktywnych linków, które już były odwiedzone */
a:visited:active {
color: #e67e22;
text-decoration: underline;
}
8.5 Przykład pełnej realizacji
/* Stylizacja pierwszej linii pierwszego akapitu wewnątrz div */
div p:first-child::first-line {
font-weight: bold;
color: #2ecc71;
}
/* Dodawanie elementu dekoracyjnego po ostatnim elemencie listy */
ul li:last-child::after {
content: "❦";
display: inline-block;
margin-left: 10px;
color: #e74c3c;
}
/* Stylizacja parzystych elementów listy przy najechaniu kursorem */
ul li:nth-child(even):hover {
background-color: #f0f0f0;
color: #3498db;
}
/* Dodawanie ikony przed linkiem przy fokusie */
a:focus::before {
content: "🔗 ";
color: #3498db;
}
/* Stylizacja pierwszej litery akapitu przy najechaniu kursorem */
p:hover::first-letter {
font-size: 2em;
color: #e74c3c;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Przykład kombinowania pseudoklas i pseudoelementów</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div>
<p>To pierwszy akapit wewnątrz div.</p>
<p>To drugi akapit wewnątrz div.</p>
</div>
<ul>
<li>Element listy 1</li>
<li>Element listy 2</li>
<li>Element listy 3</li>
<li>Element listy 4</li>
</ul>
<a href="#">Link z ikoną przy fokusie</a>
<p>Najedź na ten akapit, aby zobaczyć efekt na pierwszej literze.</p>
</body>
</html>
GO TO FULL VERSION