8.1 Основные концепции
Комбинирование псевдоклассов и псевдоэлементов в CSS позволяет создавать мощные и гибкие селекторы для стилизации элементов в зависимости от их состояния, структуры и содержимого. Это открывает множество возможностей для создания сложных и динамичных стилей, которые улучшают пользовательский интерфейс и опыт взаимодействия с веб-страницей.
Основы комбинирования
Псевдоклассы
Псевдоклассы обозначаются одним двоеточием (:) и применяются к элементам в зависимости от их состояния или позиции. Например:
:hover— применяется при наведении курсора на элемент:first-child— выбирает первый дочерний элемент родителя
Псевдоэлементы
Псевдоэлементы обозначаются двумя двоеточиями (::) и используются для стилизации частей элементов или добавления контента. Например:
::before— добавляет контент перед элементом::first-letter— стилизует первую букву элемента
Комбинирование
Псевдоклассы и псевдоэлементы можно комбинировать для создания сложных селекторов, которые позволяют применять стили к элементам в зависимости от их состояния и структуры.
Синтаксис:
селектор:псевдокласс::псевдоэлемент {
свойства: значения;
}
8.2 Комбинирование для интерактивности
Пример 1: Стилизация первой буквы при наведении
В этом примере первая буква абзаца увеличивается и окрашивается в красный цвет при наведении курсора на абзац:
/* Стилизация первой буквы абзаца при наведении курсора */
p:hover::first-letter {
font-size: 2em;
color: #e74c3c;
}
<p>Hover over this paragraph to see the first letter change.</p>
Пример 2: Добавление контента перед ссылкой при фокусе
В этом примере иконка добавляется перед ссылкой и окрашивается в синий цвет, когда ссылка получает фокус:
/* Добавление иконки перед ссылкой при фокусе */
a:focus::before {
content: "🔗 ";
color: #3498db;
}
8.3 Комбинирование для стилизации структуры
Пример 3: Стилизация первого абзаца внутри div с добавлением контента
В этом примере первая строка первого абзаца внутри div выделяется жирным шрифтом и окрашивается в зеленый цвет:
/* Стилизация первой строки первого абзаца внутри div */
div p:first-child::first-line {
font-weight: bold;
color: #2ecc71;
}
Пример 4: Добавление декоративного элемента после последнего элемента списка
В этом примере декоративный элемент добавляется после последнего элемента списка и окрашивается в красный цвет:
/* Добавление декоративного элемента после последнего элемента списка */
ul li:last-child::after {
content: "❦";
display: inline-block;
margin-left: 10px;
color: #e74c3c;
}
8.4 Комбинирование для сложных условий
Пример 5: Стилизация четных элементов списка при наведении
В этом примере четные элементы списка получают светло-серый фон и синий цвет текста при наведении курсора:
/* Стилизация четных элементов списка при наведении курсора */
ul li:nth-child(even):hover {
background-color: #f0f0f0;
color: #3498db;
}
Пример 6: Стилизация активных ссылок, которые уже были посещены
В этом примере ссылки, которые были посещены и находятся в активном состоянии, окрашиваются в оранжевый цвет и подчеркиваются:
/* Стилизация активных ссылок, которые уже были посещены */
a:visited:active {
color: #e67e22;
text-decoration: underline;
}
8.5 Пример полной реализации
/* Стилизация первой строки первого абзаца внутри div */
div p:first-child::first-line {
font-weight: bold;
color: #2ecc71;
}
/* Добавление декоративного элемента после последнего элемента списка */
ul li:last-child::after {
content: "❦";
display: inline-block;
margin-left: 10px;
color: #e74c3c;
}
/* Стилизация четных элементов списка при наведении курсора */
ul li:nth-child(even):hover {
background-color: #f0f0f0;
color: #3498db;
}
/* Добавление иконки перед ссылкой при фокусе */
a:focus::before {
content: "🔗 ";
color: #3498db;
}
/* Стилизация первой буквы абзаца при наведении курсора */
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>Пример комбинирования псевдоклассов и псевдоэлементов</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div>
<p>Это первый абзац внутри div.</p>
<p>Это второй абзац внутри div.</p>
</div>
<ul>
<li>Элемент списка 1</li>
<li>Элемент списка 2</li>
<li>Элемент списка 3</li>
<li>Элемент списка 4</li>
</ul>
<a href="#">Ссылка с иконкой при фокусе</a>
<p>Наведи на этот абзац, чтобы увидеть эффект на первой букве.</p>
</body>
</html>
ПЕРЕЙДИТЕ В ПОЛНУЮ ВЕРСИЮ