Использование псевдоклассов

Когда селектор нацелен на элемент, псевдоклассы позволяют применить к нему стиль не только по отношению к содержимому DOM, но и по отношению к внешним факторам.


В CSS псевдокласс - это ключевое слово, добавляемое к селектору, которое определяет особое состояние выбранного элемента.

Псевдокласс состоит из двоеточия ( : ), за которым следует его название:

:pseudo-class

Функциональный псевдокласс также содержит пару круглых скобок ( () ) для определения аргументов:

:pseudo-class(argument)

Элемент, к которому прикреплен псевдокласс, определяется как элемент-якорь. Полное правило CSS с использованием псевдокласса выглядит следующим образом:

selector:pseudo-class {
    property: value;
}

Селектор может содержать только псевдоклассы без якорного элемента. В этом случае правило будет применяться к любому элементу, который подходит под псевдоклассы, как если бы вы использовали перед ними селектор * (все элементы).

Все псевдоклассы можно разделить на несколько групп в зависимости от их функции:

  • Состояние отображения элементов. Эти псевдоклассы позволяют выбирать элементы на основе их состояний отображения.

  • Ввод. Эти псевдоклассы относятся к элементам формы и позволяют выбирать элементы на основе HTML-атрибутов и состояния, в котором находится поле до и после взаимодействия.

  • Лингвистические. Эти псевдоклассы отражают язык документа и позволяют выбрать элементы на основе языка или направления сценария.

  • Расположения. Эти псевдоклассы связаны со ссылками и целевыми элементами в текущем документе.

  • Состояние ресурса. Эти псевдоклассы применяются к медиа, которые могут находиться в состоянии, когда они описываются как воспроизводимые, например, видео.

  • Измерение во времени. Эти псевдоклассы применяются при просмотре чего-либо, имеющего временную привязку, например, дорожки субтитров WebVTT.

  • Функциональные. Эти псевдоклассы принимают в качестве параметра список селекторов или прощающий список селекторов.

  • Древовидные. Эти псевдоклассы связаны с расположением элемента в дереве документа.

  • Действие пользователя. Для применения этих псевдоклассов требуется определенное взаимодействие с пользователем, например, наведение указателя мыши на элемент.

Все они имеют свое применение, но большинство групп применимы только для определенных типов элементов. В этой статье мы сосредоточимся на двух последних группах псевдоклассов, поскольку они полезны во многих случаях и применимы к любому элементу HTML.

Список доступных на данный момент псевдоклассов CSS регулируется спецификациями W3C CSS и может быть найден на различных открытых ресурсах, таких как W3C Community Wiki.

Использование древовидных структурных псевдоклассов

Это наиболее удобная группа псевдоклассов, которая позволяет выбрать элементы на основе их положения в разметке. Текущая группа включает:

:root

Представляет элемент, который является корнем документа. В HTML это обычно элемент <html>.

:empty

Представляет элемент, у которого нет детей, кроме символов пустого пространства.

:nth-child()

Использует нотацию An+B или четные и нечетные аргументы для выбора элементов из списка элементов-братьев.

Например, :nth-child(even) выберет все четные элементы в пределах выбора, а :nth-child(3n) выберет каждый третий.

:nth-last-child()

Использует нотацию An+B или четные и нечетные аргументы для выбора элементов из списка элементов-братьев, считая в обратном порядке от конца списка.

Например, :nth-last-child(5) выберет пятый элемент с конца в пределах выбора.

:first-child

Применяется к элементу, который является первым среди своих родственных элементов.

:last-child

Применяется к элементу, который является последним среди родственных элементов.

:only-child

Применяется к элементу, у которого нет родственных элементов.

:nth-of-type

Использует нотацию An+B или четные и нечетные аргументы для выбора элементов из списка элементов-сиблингов, соответствующих определенному типу из списка элементов-сиблингов.

Например, p:nth-of-type(2) выберет второй элемент <p> в выборке.

:nth-last-of-type

Использует нотацию An+B или четные и нечетные аргументы для выбора элементов из списка родственных элементов, соответствующих определенному типу, из списка родственных элементов, отсчитываемых в обратном порядке от конца списка.

Например, p:nth-last-of-type(2) выберет предпоследний элемент <p> в выборке.

:first-of-type

Применяется к элементу, который является первым среди потомков, а также соответствует определенному типу.

:last-of-type

Применяется к элементу, который является последним потомком среди родственных элементов, а также соответствует определенному типу.

:only-of-type

Применяется к элементу, который является единственным потомком такого типа.

Один из распространенных случаев использования псевдоклассов с древовидной структурой - создание чередующихся строк в Таблице с данными.

  1. В Конструкторе Инструментальных Панелей добавьте компонент Таблица с данными на инструментальную панель, кликнув по нему в палитре компонентов или перетащив его на макет.

  2. Откройте редактор свойств, наведя курсор на компонент на макете и нажав кнопку () Настроить в правом верхнем углу появившегося оверлея, или выбрав его в Дереве компонентов.

  3. В редакторе свойств переключитесь на вкладку Свойства контейнера.

  1. На вкладке Свойства контейнера добавьте правила CSS в свойство Стиль контейнера:

.ant-table-body .ant-table-tbody tr.ant-table-row:nth-child(odd) {
    background-color: aliceblue;
}

.ant-table-body .ant-table-tbody tr.ant-table-row:nth-child(even) {
    background-color: lavenderblush;
}

Свойство применяется, когда поле находится вне фокуса.

  1. Предположим, что вы подготовили данные для отображения в Data Table, откройте панель в отдельной вкладке в Режиме предпросмотра, нажав кнопку () Запустить в правой части заголовка пользовательского интерфейса, чтобы проверить примененные стили.

  2. В открытой вкладке браузера "Режим предпросмотра" примененные стили будут видны, если в таблице данных есть какие-либо данные.

Использование псевдоклассов пользовательских действий

Хотя только те компоненты, для которых взаимодействие с мышью и клавиатурой является основной частью визуализации, предоставляют специальные свойства стиля для каждого интерактивного состояния, вы можете управлять такими состояниями для любого UI-компонента или даже просто его отдельного элемента. Для этого достаточно использовать специальные псевдоклассы CSS в качестве основания для приклеивания состояний к компоненту.

Группа псевдоклассов user-action позволяет стилизовать любой HTML-элемент при взаимодействии с ним пользователя:

:hover

Применяется, когда пользователь выделяет элемент, удерживая над ним курсор. На сенсорных устройствах применяется при касании пользователем, но немедленно отменяется стилем :active, если он определен.

:active

Применяется, когда элемент активируется пользователем. Например, когда на элемент нажимают.

:focus

Применяется, когда элемент имеет фокус, если он поддерживает это состояние.

:focus-visible

Применяется, когда элемент имеет фокус и агент пользователя определяет, что элемент должен быть видимым.

:focus-within

Применяется, когда элемент имеет фокус, плюс любой элемент-потомок, к которому применяется :focus.

Предположим, что вы хотите, чтобы компонент Надпись менял свой стиль, когда пользователь наводит на него курсор.

  1. Откройте инструментальную панель в режиме редактирования и добавьте компонент Надпись, щелкнув его в Палитре компонентов или перетащив на макет.

  2. Откройте редактор свойств, наведя курсор на компонент на макете и нажав кнопку () Настроить в правом верхнем углу появившегося оверлея, или выбрав его в Дереве компонентов.

  3. В редакторе свойств переключитесь на вкладку Стиль элемента.

  1. На вкладке Стиль элемента сначала добавим несколько CSS-стилей для внешнего вида компонента по умолчанию в свойство Стиль элемента CSS:

display: block;
width: fit-content;
margin: auto;
padding: 12px 32px;
color: dimgrey;
font-size: 24px;
font-weight: 500;
border-radius: 64px;
background-color: #EAEAEA;
transition: 0.2s;

  1. Далее добавьте правило для состояния hover:

:hover {  
  color: saddlebrown;
  background-color: moccasin;
  box-shadow: 0px 0px 0px 2px moccasin;
}

  1. Свойство применяется, как только поле выходит из фокуса, и результат можно протестировать на инструментальной панели.


Подробнее об используемом CSS свойстве transition можно прочитать в статье Анимированные переходы стилей.