Подкаст 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 есть ошибка, он проигнорирует недопустимый селектор, но будет использовать те, которые действительны.
:not()
Вы также можете исключить элементы с помощью псевдокласса :not() . Например, вы можете использовать его для стилизации всех ссылок, у которых нет атрибута class .
a:not([class]) {
color: blue;
}
Псевдокласс :not также может помочь вам улучшить доступность. Например, <img> должен иметь alt , даже если это пустое значение, чтобы вы могли написать правило CSS, которое добавляет толстый красный контур к недопустимым изображениям:
img:not([alt]) {
outline: 10px red;
}
Проверьте свое понимание
Проверьте свои знания псевдоклассов
Псевдоклассы действуют так, как если бы класс был динамически применен к элементу, тогда как псевдоэлементы действуют на сам элемент.
: в качестве ключевого отличительного символа в селекторе.Что из перечисленного является функциональным псевдоклассом?
:is():target() , указывающий на то, что они принимают параметры.:empty() , указывающий на то, что они принимают параметры.:not()Какой из следующих псевдоклассов возник в результате взаимодействия с пользователем?
:hover:press:squeeze:target:focus-within Что из перечисленного является псевдоклассами состояния <form> ?
:enabled:fresh:indeterminate:checked:in-range:loading:valid