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

 

Recent Posts

Марк Туллий Цицерон

Величайшее из достоинств оратора — не только сказать то, что нужно, но и не сказать…

5 дней ago

Локальная поисковая оптимизация (local SEO) в теоретических деталях

Ваша стратегия SEO продвижения должна быть сильной и охватывать практически все грани этой комплексной работы,…

7 дней ago

Омар Хайям

Я знаю мир: В нем вор сидит на воре, Глупец у мудреца всегда выигрывает в…

1 неделя ago

Уроки JavaScript — Массивы: основы использования и основные функции

Массивы не только в JavaScript являются фундаментальной структурой данных, но и практически во всех языках…

2 недели ago

Выбираем системный блок: полезные рекомендации

Системный блок — это центральная часть персонального компьютера, которая включает основные аппаратные компоненты: процессор, видеокарту,…

2 недели ago

Как стать профессиональным веб-разработчиком

Думали ли вы когда-нибудь о карьере веб-разработчика/программиста? Чтобы самостоятельно создавать свои веб-сайты, приложения, программы? Если…

2 недели ago