Дмитрий Нечаев
Псевдоклассы в CSS. Полное руководство с примерами
25 июля 2024 г.Автор
Псевдоклассы в CSS — это специальные селекторы, которые уточняют состояние или тип элемента и позволяют применять стили к элементам на основе их состояния, положения в документе или взаимодействия с пользователем. Псевдоклассы добавляют гибкость и мощность при стилизации веб-страниц, помогая создавать интерактивные и динамичные интерфейсы. В этой статье мы рассмотрим основные псевдоклассы, их использование и приведем примеры для различных ситуаций.
Что такое псевдокласс?
Псевдокласс — это ключевое слово, добавляемое к селектору, которое указывает на специальное состояние выбранных элементов. Псевдоклассы записываются с использованием двоеточия (:) перед именем псевдокласса.
Пример базового псевдокласса:
selector:pseudo-class {
/* Стили */
}Пример использования псевдокласса:
a:hover {
color: red;
}В этом примере стиль применяется к ссылкам при наведении курсора мыши.
Основные псевдоклассы
Псевдоклассы взаимодействия
:hover
Применяется, когда пользователь наводит курсор на элемент.
Пример:
button:hover {
background-color: blue;
color: white;
}:active
Применяется к активному элементу, например, когда пользователь нажимает на кнопку.
Пример:
button:active {
background-color: darkblue;
}:focus
Применяется к элементу, когда он получает фокус, например, при нажатии на поле ввода.
Пример:
input:focus {
border-color: green;
}Псевдоклассы состояния
:checked
Применяется к элементам формы (checkbox или radio), которые находятся в выбранном состоянии.
Пример:
input[type="checkbox"]:checked {
background-color: green;
}:disabled
Применяется к элементам формы, которые отключены.
Пример:
input:disabled {
background-color: #ccc;
}:enabled
Применяется к элементам формы, которые включены.
Пример:
input:enabled {
border: 1px solid black;
}Псевдоклассы размещения
:first-child
Применяется к первому дочернему элементу своего родителя.
Пример:
p:first-child {
font-weight: bold;
}:last-child
Применяется к последнему дочернему элементу своего родителя.
Пример:
p:last-child {
color: red;
}:nth-child()
Применяется к элементам на основе их позиции в родительском элементе.
Пример:
li:nth-child(odd) {
background-color: #f0f0f0;
}
li:nth-child(even) {
background-color: #ddd;
}Псевдоклассы формы
:valid
Применяется к элементам формы, значение которых соответствует правилам валидации.
Пример:
input:valid {
border-color: green;
}:invalid
Применяется к элементам формы, значение которых не соответствует правилам валидации.
Пример:
input:invalid {
border-color: red;
}Псевдоклассы структуры
:empty
Применяется к элементам, не имеющим дочерних элементов.
Пример:
div:empty {
display: none;
}:not()
Применяется к элементам, которые не соответствуют указанному селектору.
Пример:
button:not(.primary) {
background-color: grey;
}Примеры использования псевдоклассов в реальных проектах
Стилизация кнопок
Использование псевдоклассов для создания интерактивных кнопок:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.btn {
padding: 10px 20px;
background-color: blue;
color: white;
border: none;
cursor: pointer;
}
.btn:hover {
background-color: darkblue;
}
.btn:active {
background-color: navy;
}
</style>
<title>Стилизация кнопок</title>
</head>
<body>
<button class="btn">Кнопка</button>
</body>
</html>Стилизация полей формы
Использование псевдоклассов для стилизации полей ввода в зависимости от их состояния:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
input {
padding: 10px;
border: 1px solid #ccc;
}
input:focus {
border-color: blue;
}
input:valid {
border-color: green;
}
input:invalid {
border-color: red;
}
</style>
<title>Стилизация полей формы</title>
</head>
<body>
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
</form>
</body>
</html>Стилизация списка
Использование псевдоклассов для чередования цветов строк списка:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
li:nth-child(odd) {
background-color: #f0f0f0;
}
li:nth-child(even) {
background-color: #ddd;
}
</style>
<title>Стилизация списка</title>
</head>
<body>
<ul>
<li>Элемент 1</li>
<li>Элемент 2</li>
<li>Элемент 3</li>
<li>Элемент 4</li>
<li>Элемент 5</li>
</ul>
</body>
</html>Заключение
Псевдоклассы в CSS предоставляют мощный способ стилизации элементов на основе их состояния и положения в документе. Они позволяют создавать интерактивные и динамичные интерфейсы, улучшая пользовательский опыт. Понимание различных типов псевдоклассов и их правильное использование помогает разработчикам создавать гибкие, адаптивные и поддерживаемые стили для веб-страниц. Экспериментируйте с различными псевдоклассами и находите оптимальные решения для ваших проектов.
Карта развития разработчика
Получите полную карту развития разработчика по всем направлениям: frontend, backend, devops, mobile