Псевдоклассы в 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
– стили для ссылок, которые уже посещены пользователем
Поддержка браузерами
Все последние версии браузеров, включая Internet Explorer 9 и выше, поддерживают CSS3 псевдоклассы.
Последние посты
Как выбрать идеальный ноутбук: Полный гайд
Выбор ноутбука может быть сложной задачей в мире, где рынок переполнен вариантами на любой вкус… Читать далее
Томас Эдисон
Наша самая большая слабость заключается в том, что мы быстро сдаемся. Самый верный способ добиться… Читать далее
Самые красивые и впечатляющие мосты со всего мира (ТОП-10)
Мост — это нечто большее, чем просто сооружение, соединяющее два берега. Для того, чтобы появился… Читать далее
Соломон
Жизнь нас учит, что свою пару мы познаем, когда разводимся, своих братьев мы познаем, когда… Читать далее
Чак Паланик
Кто может — тот делает. Кто не может — тот критикует Чак Паланик Читать далее
Ричард Бах
Ни одно желание не дается тебе отдельно от силы, позволяющей его осуществить. Хотя, возможно, для… Читать далее