Категории: 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 – стили для ссылок, которые уже посещены пользователем

 

 

 

Поддержка браузерами

Все последние версии браузеров, включая Internet Explorer 9 и выше, поддерживают CSS3 псевдоклассы.

 

Share
Теги: CSS3HTML5
07/10/2017 17:36

Последние посты

Каталог комбикорма для свиней: выбор комбикорма для младших особей

Уход за младшими свиньями в свиноводстве имеет свои особенности. Один из ключевых аспектов - это… Читать далее

22/09/2023

Где и как используется горячий клей?

В профессиональном и бытовом применении популярен горячий клей – специальные термоклеевые стержни, которые производятся в… Читать далее

21/09/2023

Гортензия метельчатая: особенности выращивания

Гортензия – род цветковых растений, завезенный в Европу в XIV веке. В основном такой куст… Читать далее

21/09/2023

Какие бывают брекеты и какая между ними разница?

В современной стоматологии исправить прикус и выровнять зубной ряд можно при помощи разных ортодонтических конструкций.… Читать далее

15/09/2023

Накрутка комментариев в YouTube – создавайте свой имидж формируя мнение

Комментарии к контенту – действенный, однако, недооцененный многими инструмент продвижения. Грамотное использование данного ресурса позволит… Читать далее

14/09/2023

Что подарить мужу военному на День Рождения?

День Рождения - это особенный момент в жизни каждого, и презент в этот день должен… Читать далее

14/09/2023