Псевдоклассы

Подкаст CSS – 015: Псевдоклассы

Предположим, у вас есть форма регистрации по электронной почте, и вы хотите, чтобы поле формы электронной почты имело красную рамку, если оно содержит недействительный адрес электронной почты. Как ты это делаешь? Вы можете использовать псевдокласс CSS :invalid , который является одним из многих псевдоклассов, предоставляемых браузером.

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

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

Интерактивные состояния

Следующие псевдоклассы применяются в зависимости от взаимодействия пользователя с вашей страницей.

:hover

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

:active

Это состояние срабатывает, когда с элементом активно взаимодействуют (например, щелкают мышью) до того, как щелчок будет отпущен. Если используется указательное устройство, например мышь, это состояние соответствует моменту, когда щелчок начинается и еще не отпущен.

:focus , :focus-within и :focus-visible

Если элемент может получить фокус — например, <button> — вы можете отреагировать на это состояние с помощью псевдокласса :focus .

Вы также можете отреагировать, если дочерний элемент вашего элемента получит фокус, с помощью :focus-within .

Фокусируемые элементы, такие как кнопки, будут показывать кольцо фокусировки, когда они находятся в фокусе, даже при нажатии. В такой ситуации разработчик применит следующий CSS:

button:focus {
    outline: none;
}

Этот CSS удаляет кольцо фокусировки браузера по умолчанию, когда элемент получает фокус, что создает проблему доступности для пользователей, которые перемещаются по веб-странице с помощью клавиатуры. Если стиль фокуса отсутствует, они не смогут отслеживать, где в данный момент находится фокус при использовании клавиши табуляции . С помощью :focus-visible вы можете представить стиль фокуса, когда элемент получает фокус с помощью клавиатуры, а также использовать правило outline: none , чтобы предотвратить это, когда с ним взаимодействует указательное устройство.

button:focus {
    outline: none;
}

button:focus-visible {
    outline: 1px solid black;
}

:target

Псевдокласс :target выбирает элемент, id которого соответствует фрагменту URL. Предположим, у вас есть следующий HTML:

<article id="content">
    …
</article>

Вы можете прикрепить стили к этому элементу, если URL-адрес содержит #content .

#content:target {
    background: yellow;
}

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

Исторические государства

:link

Псевдокласс :link можно применить к любому элементу <a> , имеющему значение href , которое еще не было посещено.

:visited

Вы можете оформить ссылку, которую уже посещал пользователь, используя псевдокласс :visited . Это противоположное состояние :link , но из соображений безопасности у вас меньше свойств CSS. Вы можете стилизовать только color , background-color , border-color , outline-color и цвет fill и stroke SVG.

Порядок имеет значение

Если вы определите стиль :visited , он может быть переопределен псевдоклассом ссылки, по крайней мере, с равной специфичностью. По этой причине рекомендуется использовать правило LVHA для стилизации ссылок с псевдоклассами в определенном порядке: :link , :visited , :hover , :active .

a:link {}
a:visited {}
a:hover {}
a:active {}

Состояния формы

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

:disabled и :enabled

Если элемент формы, например <button> , отключен браузером, вы можете подключиться к этому состоянию с помощью псевдокласса :disabled . Псевдокласс :enabled доступен для противоположного состояния, хотя элементы формы также :enabled по умолчанию, поэтому вы можете не воспользоваться этим псевдоклассом.

:checked и :indeterminate

Псевдокласс :checked доступен, когда вспомогательный элемент формы, такой как флажок или переключатель, находится в проверенном состоянии.

Состояние :checked является двоичным (истина или ложь), но флажки имеют промежуточное состояние, когда они не отмечены и не сняты. Это известно как :indeterminate состояние.

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

Элемент <progress> также имеет неопределенное состояние, которому можно стилизовать. Распространенный вариант использования — придать ему полосатый вид, чтобы указать, что неизвестно, сколько еще нужно.

:placeholder-shown

Если поле формы имеет атрибут placeholder и не имеет значения , псевдокласс :placeholder-shown можно использовать для прикрепления стилей к этому состоянию. Как только в поле появится контент, независимо от того, есть ли у него placeholder или нет, это состояние больше не будет применяться.

Состояния проверки

Вы можете ответить на проверку HTML-формы с помощью псевдоклассов, таких как :valid , :invalid и :in-range . Псевдоклассы :valid и :invalid полезны для таких контекстов, как поле электронной почты, имеющее pattern , которому необходимо сопоставить, чтобы оно было допустимым полем. Это допустимое состояние значения может быть показано пользователю, помогая ему понять, что он может безопасно перейти к следующему полю.

Псевдокласс :in-range доступен, если входные данные имеют min и max , например, числовые входные данные , и значение находится в этих границах.

С помощью HTML-форм вы можете определить, что поле является обязательным с required атрибутом. Псевдокласс :required будет доступен для обязательных полей. Поля, которые не являются обязательными, можно выбрать с помощью псевдокласса :optional .

Выбор элементов по их индексу, порядку и вхождению

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

:first-child и :last-child

Если вы хотите найти первый или последний элемент, вы можете использовать :first-child и :last-child . Эти псевдоклассы возвращают либо первый, либо последний элемент в группе родственных элементов.

:only-child

Вы также можете выбрать элементы, у которых нет братьев и сестер, с помощью псевдокласса :only-child .

:first-of-type и :last-of-type

Вы можете выбрать :first-of-type и :last-of-type , которые на первый взгляд выглядят так же, как :first-child и :last-child , но обратите внимание на этот HTML:

<div class="my-parent">
    <p>A paragraph</p>
    <div>A div</div>
    <div>Another div</div>
</div>

И этот CSS:

.my-parent div:first-child {
    color: red;
}

Никакие элементы не будут окрашены в красный цвет, поскольку первый дочерний элемент — это абзац, а не элемент div. В этом контексте полезен псевдокласс :first-of-type .

.my-parent div:first-of-type {
    color: red;
}

Несмотря на то, что первый <div> является вторым дочерним элементом, он по-прежнему является первым по типу внутри элемента .my-parent , поэтому согласно этому правилу он будет окрашен в красный цвет.

:nth-child и :nth-of-type

Вы также не ограничены первыми и последними дочерними элементами и типами. Псевдоклассы :nth-child и :nth-of-type позволяют указать элемент, имеющий определенный индекс. Индексация в селекторах CSS начинается с 1.

В эти псевдоклассы вы также можете передать не только индекс. Если вы хотите выбрать все четные элементы, вы можете использовать :nth-child(even) .

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

li:nth-child(3n+3) {
    background: yellow;
}

Этот селектор выбирает каждый третий элемент, начиная с элемента 3. n в этом выражении — это индекс, который начинается с нуля, а 3 ( 3n ) — это то, на сколько вы умножаете этот индекс.

Допустим, у вас есть 7 элементов <li> . Первый выбранный элемент — 3, поскольку 3n+3 преобразуется в (3 * 0) + 3 . Следующая итерация выберет элемент 6, поскольку n теперь увеличилось до 1 , то есть (3 * 1) + 3) . Это выражение работает как для :nth-child , так и :nth-of-type .

Вы можете поиграть с этим типом селектора в этом тестере nth-child или в этом инструменте выбора количества .

:only-of-type

Наконец, вы можете найти единственный элемент определенного типа в группе братьев и сестер с помощью :only-of-type . Это полезно, если вы хотите выбрать списки, содержащие только один элемент, или если вы хотите найти единственный полужирный элемент в абзаце.

Поиск пустых элементов

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

:empty

Если у элемента нет дочерних элементов, к ним применяется псевдокласс :empty . Однако дочерние элементы — это не просто HTML-элементы или текстовые узлы: они также могут быть пробелами, что может сбивать с толку, когда вы отлаживаете следующий HTML-код и задаетесь вопросом, почему он не работает с :empty :

<div>
</div>

Причина в том, что между открывающим и закрывающим <div> есть пробелы, поэтому пустое значение не подойдет.

Псевдокласс :empty может быть полезен, если у вас мало контроля над HTML и вы хотите скрыть пустые элементы, например, в редакторе контента WYSIWYG. Здесь редактор добавил случайный пустой абзац.

<article class="post">
 <p>Donec ullamcorper nulla non metus auctor fringilla.</p>
 <p></p>
 <p>Curabitur blandit tempus porttitor.</p>
</article>

С помощью :empty вы можете найти это и скрыть.

.post :empty {
    display: none;
}

Поиск и исключение нескольких элементов

Некоторые псевдоклассы помогут вам написать более компактный CSS.

:is()

Если вы хотите найти все дочерние элементы h2 , li и img в элементе .post , вы можете написать такой список селекторов:

.post h2,
.post li,
.post img {
    …
}

С помощью псевдокласса :is() вы можете написать более компактную версию:

.post :is(h2, li, img) {
    …
}

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

:not()

Вы также можете исключить элементы с помощью псевдокласса :not() . Например, вы можете использовать его для стилизации всех ссылок, у которых нет атрибута class .

a:not([class]) {
    color: blue;
}

Псевдокласс :not также может помочь вам улучшить доступность. Например, <img> должен иметь alt , даже если это пустое значение, чтобы вы могли написать правило CSS, которое добавляет толстый красный контур к недопустимым изображениям:

img:not([alt]) {
    outline: 10px red;
}

Проверьте свое понимание

Проверьте свои знания псевдоклассов