Что такое псевдоклассы в CSS
Псевдоклассы в CSS — это ключевые слова, которые добавляются к селекторам и указывают на определенное состояние элемента (а не выбирают их напрямую). Псевдоклассы позволяют стилизовать элементы в различных состояниях без внесения изменений в HTML-код и лишнего усложнения CSS-кода, при этом улучшая пользовательский опыт взаимодействия со страницей.
Синтаксис псевдоклассов
Синтаксис псевдоклассов в CSS не требует длительного времени на изучение — псевдокласс записывается после селектора и начинается с двоеточия:
selector:pseudo-class {
property: value;
}Здесь selector — это элемент, к которому будут применены стили, :pseudo-class — определенное состояние, при котором будут применены стили, property: value — это свойство и значение соответственно.
Интерактивные состояния
В этом разделе рассмотрим псевдоклассы hover, active, focus, focus-within, focus-visible и target.
hover
Псевдокласс :hover — это один из самых часто используемых псевдоклассов в CSS. Он срабатывает, когда пользователь наводит курсор на определенный элемент, например, ссылку или кнопку. Важно помнить о том, что на любых устройствах с сенсорным экраном :hover может работать некорректно/не работать вовсе.
Пример использования :hover:
button:hover {
background-color: #c7f16c;
cursor: pointer;
}Этот CSS-код при наведении курсора на кнопку изменяет цвет ее фона и вид курсора на pointer.
active
Псевдокласс :active срабатывает в момент нажатия на элемент — то есть когда пользователь уже кликнул на него, но еще не отпустил кнопку мыши. Казалось бы, стили элемента изменяются на мгновения, но это является неотъемлемой частью взаимодействия пользователя с различными элементами.
Пример использования :active:
button:active {
background-color: #848612;
}При нажатии на кнопку цвет ее фона будет изменен.
focus, focus-within и focus-visible
:focus — это псевдокласс, который срабатывает, когда элемент (например, поле ввода данных в форме) находится в фокусе — пользователь кликает на него мышью или переходит к нему с помощью клавиши tab. Часто в таком случае изменяются стили контура элемента:
input:focus {
outline: 2px solid #eef3f9;
}Псевдокласс :focus-within применяется, если сам элемент или его дочерний элемент находится в фокусе:
form:focus-within {
border: 1px solid #eef3f9;
}Псевдокласс :focus-visible применяется тогда, когда элемент находится в фокусе и User Agent определяет, что фокус на элементе необходимо обозначить визуально:
button:focus-visible {
outline: 2px dashed #d7d4d4;
}target
Псевдокласс :target управляет стилем элемента, на который ведет якорная ссылка (ссылка, которая указывает на определенный раздел/компонент на этой же странице).
Например, такой CSS-код при клике на ссылку, указывающую на #button-css изменит цвет фона этого блока:
#button-css:target {
background-color: #e8b6d4;
}Состояния
Рассмотрим два псевдокласса для стилизации ссылок: link и visited.
link
:link стилизует ссылки, которые пользователь еще не посещал. С помощью него можно настроить общий вид отображения не посещенных ссылок на странице.
Как правило, :link задает определенный цвет ссылке:
a:link {
color: #0000ff;
}visited
:visited срабатывает на тех ссылках, которые пользователь уже посещал.
Стандартно здесь также просто меняется цвет ссылки:
a:visited {
color: pu#800080
}Стили, которые могут применяться с помощью :visited, ограничены требованиями безопасности браузеров. Нельзя использовать никакие стили, кроме следующих: color, background-color, border-color, border-bottom-color, border-left-color, border-right-color, border-top-color, outline-color, column-rule-color, fill и stroke.
Теперь, когда рассмотрены четыре псевдокласса, которые могут использоваться для оформления ссылок (hover, active, link, visited), стоит сказать о том, в каком порядке стоит записывать эти правила:
- link
- visited
- hover
- active
Так стили не будут неожиданно переопределяться.
Состояния формы
Различные формы присутствуют на многих сайтах, например, на сайтах интернет-магазинов или образовательных платформ и являются еще одним элементом взаимодействия пользователя со страницей. Рассмотрим несколько псевдоклассов, которые используются для стилизации форм.
disabled и enabled
:disabled предназначен для стилизации элементов, которые недоступны для пользователя (например, на них нельзя кликнуть, начать вводить текст и так далее).
Вариант использования :disabled:
button:disabled {
background-color: #ccc;
cursor: not-allowed;
}:enabled же, напротив, применяется к элементам, с которыми пользователь может взаимодействовать:
input:enabled {
border-color: #45aef8;
}checked и indeterminate
:checked срабатывает на checkbox-, radio- и option-элементах, которые выбраны пользователем.
Пример использования :checked:
input:checked {
background-color: #f479b5;
}:indeterminate применяется к элементам, которые находятся в неопределенном состоянии:
input:indeterminate {
background-color: #60eca6;
}placeholder-shown
:placeholder-shown срабатывает, когда в текстовом поле или input-элементе активен плейсхолдер (подсказка). Фактически этот псевдокласс применяется, пока поле ввода пустое — пользователь еще не начал вводить текст.
Такой CSS-код изменит стили границы элемента:
input:placeholder-shown {
border: 2px solid #c0c0c0;
}Состояния валидации
:valid и :invalid стилизуют элементы в зависимости от того, проходят ли введенные данные валидацию в соответствии с типом поля.
Пример использования:
input:valid {
border-color: #008000;
}
input:invalid {
border-color: #ff0000;
}Выбор элементов по их индексу, порядку и месту появления
Псевдоклассы также позволяют стилизовать элементы в зависимости от их расположения внутри HTML. Рассмотрим такие псевдоклассы.
first-child и last-child
:first-child позволяет выбрать первый дочерний элемент в родителе.
Такой код изменит цвет фона первого дочернего элемента div:
div:first-child {
background-color: #add8e6;
}Псевдокласс :last-child, наоборот, выбирает последний дочерний элемент:
div:last-child {
background-color: #add8e6;
}only-child
:only-child срабатывает на единственном дочернем элементе родителя.
Такой CSS-код изменит стиль шрифта для единственного дочернего элемента p:
p:only-child {
font-style: italic;
}first-of-type и last-of-type
:first-of-type выбирает первый элемент определенного типа внутри родителя:
/* HTML-код */
<div>
<span>Первый span</span>
<span>Второй span</span>
<span>Третий span</span>
</div>
div:first-of-type {
color: #a2c1ed;
}Цвет изменится только для первого span.
:last-of-child, наоборот, выбирает последний элемент определенного типа внутри родителя:
div:last-of-type {
color: #a2c1ed;
}nth-child и nth-of-type
:nth-child(n) позволяет выбрать элемент/элементы на основе позиции среди всех дочерних элементов. Значением n может быть число, выражение и ключевые слова (odd и even).
Для того чтобы выбрать только второй элемент, можно использовать такой код:
li:nth-child(2) {
background-color: #f0f0f0;
}:nth-of-type тоже выбирает элементы на основе их позиции среди дочерних элементов, но при этом учитывается тип элемента.
Чтобы выбрать только четные элементы, можно использовать два варианта кода:
li:nth-of-type(even) {
background-color: #f0f0f0;
}
li:nth-of-type(2n) {
background-color: #f0f0f0;
}only-of-type
:only-of-type срабатывает на единственном элементе определенного типа внутри родителя.
Пример использования:
p:only-of-type {
text-align: center;
}Поиск пустых элементов
Часто стилизовать пустые элементы с помощью псевдокласса :empty нужно, чтобы скрыть их (так как иначе они могут занимать место на странице), но существуют и другие ситуации, в которых используется этот псевдокласс.
empty
:empty срабатывает на элементах, которые не имеют потомков (включая элементы и текст) — то есть на пустых элементах.
Пример стилизации с использованием :empty:
div:empty {
background: #98ed49;
}Нахождение и исключение нескольких элементов
is()
Функция-псевдокласс :is() принимает в виде аргументов несколько селекторов и применяет указанные стили к каждому из них.
Такой пример с использованием :is():
:is(h1, h2, h3) {
color: #00008b;
}Эквивалентен следующему коду:
h1,
h2,
h3 {
color: #00008b;
}Таким образом, :is() нужен для сокращения и улучшения читаемости CSS-кода.
not()
:not() тоже принимает в виде аргументов несколько селекторов, но применяет указанные стили к тем элементам, которые не соответствуют указанным селекторам. Этот псевдокласс также нужен для сокращения кода.
Пример использования :not():
button:not(:disabled) {
cursor: pointer;
}