8.1 Основні концепції
Комбінування псевдокласів і псевдоелементів в CSS дозволяє створювати потужні і гнучкі селектори для стилізації елементів залежно від їх стану, структури та вмісту. Це відкриває багато можливостей для створення складних і динамічних стилів, які покращують користувацький інтерфейс і взаємодію з веб-сторінкою.
Основи комбінування
Псевдокласи
Псевдокласи позначаються одним двокрапкою (:) і застосовуються до елементів залежно від їх стану або позиції. Наприклад:
:hover— застосовується при наведенні курсору на елемент:first-child— вибирає перший дочірній елемент батька
Псевдоелементи
Псевдоелементи позначаються двома двокрапками (::) і використовуються для стилізації частин елементів або додавання контенту. Наприклад:
::before— додає контент перед елементом::first-letter— стилізує першу літеру елемента
Комбінування
Псевдокласи і псевдоелементи можна комбінувати для створення складних селекторів, які дозволяють застосовувати стилі до елементів залежно від їх стану та структури.
Синтаксис:
селектор:псевдоклас::псевдоелемент {
властивості: значення;
}
8.2 Комбінування для інтерактивності
Приклад 1: Стилізація першої літери при наведенні
У цьому прикладі перша літера абзацу збільшується і фарбується в червоний колір при наведенні курсору на абзац:
/* Стилізація першої літери абзацу при наведенні курсору */
p:hover::first-letter {
font-size: 2em;
color: #e74c3c;
}
<p>Наведи курсором на цей абзац, щоб побачити зміну першої літери.</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>
ПЕРЕЙДІТЬ В ПОВНУ ВЕРСІЮ