Псевдоклассы и псевдоэлементы в CSS позволяют стилизовать элементы на основе их состояния, положения в дереве DOM или добавлять контент, не присутствующий в исходном HTML. Они расширяют возможности селекторов CSS, позволяя более точно контролировать внешний вид и поведение элементов на странице.
Псевдоклассы
Псевдоклассы применяются к элементам на основе их состояния или позиции в документе. Например, вы можете выделить ссылку, когда пользователь наводит на неё курсор, или применить стиль к первому абзацу в тексте.
Примеры псевдоклассов
:hoverПрименяется, когда пользователь наводит указатель мыши на элемент.a:hover { color: red; }
:activeАктивируется, когда элемент активен (например, кнопка нажата).button:active { background-color: #ccc; }:focusПрименяется, когда элемент получает фокус (например, текстовое поле в форме).input:focus { outline: 2px solid blue; }:first-childСелектор первого дочернего элемента.p:first-child { font-weight: bold; }:nth-child(n)Позволяет выбрать каждый n-й элемент.li:nth-child(2n) { background-color: #f0f0f0; }:not()Отрицательный селектор, который выбирает все элементы, кроме указанных.:not(p) { color: gray; }
Псевдоэлементы
Псевдоэлементы позволяют добавлять контент или стили к элементам, которые не существуют в исходном HTML. Например, вы можете добавить текст перед или после элемента, создать декоративные элементы или настроить первую букву абзаца.
Примеры псевдоэлементов
::beforeДобавляет контент перед содержимым элемента..block::before { content: "Внимание: "; color: red; }::afterДобавляет контент после содержимого элемента..block::after { content: " Конец."; color: green; }::first-lineПрименяет стиль к первой строке текста.p::first-line { font-size: 120%; font-weight: bold; }::first-letterПрименяет стиль к первой букве текста.p::first-letter { float: left; font-size: 200%; line-height: 1; }
Пример использования
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Псевдоклассы и псевдоэлементы</title> <style> a:hover { color: red; } button:active { background-color: #ccc; } input:focus { outline: 2px solid blue; } p:first-child { font-weight: bold; } li:nth-child(2n) { background-color: #f0f0f0; } :not(p) { color: gray; } .block::before { content: "Внимание: "; color: red; } .block::after { content: " Конец."; color: green; } p::first-line { font-size: 120%; font-weight: bold; } p::first-letter { float: left; font-size: 200%; line-height: 1; } </style> </head> <body> <h1>Пример использования псевдоклассов и псевдоэлементов</h1> <p><a href="#">Наведи на меня!</a></p> <button>Нажми меня!</button> <input type="text" placeholder="Получи фокус"> <ul> <li>Первый пункт</li> <li>Второй пункт</li> <li>Третий пункт</li> <li>Четвертый пункт</li> </ul> <div class="block">Текстовый блок</div> <p>Абзац с выделенной первой строкой и первой буквой.</p> </body> </html>
Псевдоклассы и псевдоэлементы предоставляют мощные средства для стилизации элементов на основе их состояния, положения в документе или добавленного контента. Они помогают улучшить внешний вид и взаимодействие пользователя с вашим сайтом, делая его более привлекательным и удобным.
Загрузка...