Псевдоклассы в 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 псевдоклассы.

Tags: CSS3HTML5

Recent Posts

Как выучить немецкий язык легко и весело? С помощью Beste Freunde!

Немецкий часто считается сложным языком. Да, немецкая лексика имеет «тяжелый» характер. Да, есть действительно очень… Read More

27/09/2020

Отопление и горячая вода – когда нужно, а не когда соизволят включить

Тепло в доме и горячая вода в любое время для многих жителей многоквартирных и частных… Read More

19/09/2020

Инструкция по скачиванию видео с сервиса TikTok (бесплатно и без watermark)

Если вы еще не слышали о TikTok, тогда рекомендуем вам сначала ознакомиться с этим кратким… Read More

17/09/2020

Что есть в бюджетном ноутбуке – на какие характеристики рассчитывать?

Прошли те времена, когда приличный ноутбук стоил от 1000 долларов. Сегодня можно купить довольно неплохой… Read More

16/09/2020

Что лучше – цифровое телевидение Т2 или интернет-телевидение?

Современную жизнь невозможно представить без телевидения. Оно позволяет узнавать о событиях в Украине и мире,… Read More

02/09/2020

Гипоаллергенная подушка. Для чего она важна?

Сейчас найдется мало людей, у которых нет аллергии на продукты или пыльцу растений. Считается, что… Read More

28/08/2020