Коварная война россии против Украины. Ориентировочные потери врага
(по состоянию на 20.04.2024)
458580
солдат
348
самолетов
325
вертолетов
7213
танков
13873
ББМ
11678
артиллерия
763
ПВО
1046
РСЗО
15717
машин
26
корабли и катера
Псевдоклассы в 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 псевдоклассы.

 

 

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *