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>
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ