10.1 Псевдокласи
Псевдокласи та псевдоелементи в HTML і CSS дозволяють стилізувати елементи на основі їхнього стану або вмісту, без необхідності додавання додаткових класів чи зміни структури HTML-документа. Вони надають круті інструменти для створення інтерактивних та естетично привабливих веб-сторінок.
Псевдокласи застосовуються до елементів на основі їхнього стану чи положення в структурі документа. Вони допомагають стилізувати елементи в різних ситуаціях, таких як наведення курсору, фокусування чи виділення елементів. Псевдокласи починаються з двоокрапки (:).
Найпростіші псевдокласи:
Псевдоклас :hover застосовується до елемента, коли користувач наводить на нього курсор.
<button type="button">Кнопка</button>
button:hover {
color: red;
}
Псевдоклас :focus застосовується до елемента, коли він отримує фокус, наприклад, при натисканні на поле введення.
<input type="text">
input:focus {
outline-color: blue;
}
Псевдоклас :active застосовується до елемента, коли він активний, наприклад, при натисканні на посилання чи кнопку.
<button type="button">Кнопка</button>
button:active {
background-color: green;
}
Псевдоклас :visited застосовується до посилань, які користувач вже відвідував.
<a href="#">Посилання</a>
a:visited {
color: purple;
}
10.2 Псевдоелементи
Псевдоелементи дозволяють стилізувати частини елементів, які не є окремими HTML-елементами. Вони починаються з двох двоокрапок (::). Псевдоелементи використовуються для створення та стилізації контенту перед або після елемента, виділення першого рядка або першої літери елемента та для інших задач.
Найпростіші псевдоелементи:
Псевдоелемент ::before вставляє вміст перед контентом елемента.
<p>Мене звати Степан.</p>
p::before {
content: "Привіт! ";
color: blue;
}
Псевдоелемент ::after вставляє вміст після контенту елемента.
<p>Увага!</p>
p::after {
content: " Дякую за увагу!";
color: red;
}
Псевдоелемент ::first-line застосовується до першого рядка елемента. Він дозволяє стилізувати тільки перший рядок тексту.
<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;
}
Псевдоелемент ::selection застосовується до виділеного користувачем тексту.
<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;
}
Спробуйте виділити текст у результаті.
10.3 Приклади використання псевдоелементів
Псевдокласи та псевдоелементи в HTML і CSS надають чудові можливості для стилізації елементів на основі їхнього стану чи вмісту. Вони дозволяють створювати більш інтерактивні та візуально привабливі веб-сторінки без зміни структури HTML.
Приклад 1: Додавання іконки перед текстом посилання
<html>
<head>
<style>
a::before {
content: "🔗";
margin-right: 5px;
}
</style>
</head>
<body>
<a href="#">Це посилання з іконкою</a>
</body>
</html>
Приклад 2: Додавання стилізованого блоку після абзацу
<html>
<head>
<style>
p::after {
content: "🌟";
display: block;
text-align: center;
margin-top: 10px;
}
</style>
</head>
<body>
<p>Це абзац тексту.</p>
</body>
</html>
Комбінування
Псевдокласи та псевдоелементи можна комбінувати для створення складних і потужних стилів.
Приклад: Стилізація виділеного тексту всередині посилання при наведенні
<html>
<head>
<style>
a:hover::selection {
background-color: lightblue;
color: navy;
}
</style>
</head>
<body>
<a href="#">Виділіть цей текст, а потім наведіть на нього мишкою.</a>
</body>
</html>
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ