Categories: CSSУроки программирования

Псевдоклассы в CSS – минимальный набор знаний

Псевдокласс в CSS стилях – это ключевое слово, которое при добавлении к селектору определяет его особое состояние. К примеру, псевдокласс :focus позволяет применять особые CSS-стили для элементов, которые находятся в фокусе (например, можно подсвечивать фокусное поле ввода формы цветом, отличным от других используемых цветов формы).

Синтаксис:

селектор:псевдокласс { свойство: значение; }

пример
.content:hover { background-color: #06a79d; }

Основные псевдоклассы CSS:

:active – придает стиль активной ссылке
:checked – используется для элементов (например, checkbox и radio), когда они отмечены
:default – задает стиль элементам формы, которые установлены по умолчанию в группе подобных элементов
:disabled – применяет стили для заблокированных элементов формы
:empty – стили для пустых элементов (например, не содержат дочерних элементов, текста)
:enabled – стили для доступных (не заблокированных) элементов формы
:first-child – указывает стили для первого дочернего элемента своего родителя
:first-of-type – определяет стилевые правила для первого элемента в списке дочерних элементов своего родителя
:focus – задает стиль для элемента в фокусе
:invalid – стили для полей формы, содержимое которых не соответствует указанному типу
:hover – применяет стиль для элемента, на который наведен курсор мыши
:indeterminate – присваивает стиль для элементов формы (флажки и переключатели), которые находятся в неопределенном состоянии (не включены и не выбраны)
:lang – этот псевдокласс указывает язык, который используется в документе или его части
:last-child – присваивает стили последнему элементу своего родителя
:last-of-type – определяет стилевые правила для последнего элемента в списке дочерних элементов своего родителя
:link – стили для ссылок, которые еще не посещались пользователем
:not – стилевые правила для элементов, которые не содержат указанный селектор
:nth-child – добавляет стили элементам на основе нумерации в дереве элементов
:nth-last-child – добавляет стили элементам на основе нумерации в дереве элементов, отсчет ведется от последнего элемента
:nth-last-of-type – стили для элементов указанного типа на основе нумерации в дереве элементов, отсчет ведется от последнего элемента
:nth-of-type – стили для элементов указанного типа на основе нумерации в дереве элементов
:only-child – стили для единственного дочернего элемента своего родителя
:only-of-type – присваивает стили дочернему элементу указанного типа, только если он единственный у родителя
:optional – стили для поля формы, у которого не задан атрибут required
:read-only – стили для поля формы, у которого задан атрибут readonly
:read-write – стилевое оформление для полей формы, которые доступны для изменения
:required – стилевые правила для тега <input>, у которого установлен атрибут required
:root – указание на корневой элемент документа. В HTML – это всегда элемент <html>
:target – стили для целевого элемента в адресной строке браузера (#ID)
:valid – стилевое оформление полей формы, содержимое которых проходит проверку в браузере на соответствие указанному типу
:visited – стили для ссылок, которые уже посещены пользователем