Подкаст 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;
}
Проверьте свое понимание
Проверьте свои знания псевдоклассов
Псевдоклассы действуют так, как если бы класс был динамически применен к элементу, тогда как псевдоэлементы действуют на сам элемент.
Что из перечисленного является функциональным псевдоклассом?
:is()
:empty
:not()
:target
Какой из следующих псевдоклассов возник в результате взаимодействия с пользователем?
:focus-within
:target
:press
:hover
:squeeze
Что из перечисленного является псевдоклассами состояний <form>
?
:indeterminate
:fresh
:checked
:in-range
:valid
:loading
:enabled