Псевдоклассы
Определяет корневой элемент документа. В HTML этот селектор всегда соответствует элементу .
Псевдокласс ::-webkit-input-placeholder
Псевдокласс, с помощью которого задаётся стилевое оформление подсказывающего текста в Chrome.
Псевдокласс ::-moz-placeholder
Псевдокласс, с помощью которого задаётся стилевое оформление подсказывающего текста в Firefox.
Псевдокласс :read-write
Применяется к полям формы, доступных для изменения.
Псевдокласс :read-only
Применяется к полям формы, у которых задан атрибут readonly .
Псевдокласс :optional
Применяет стилевые правила к полю формы, у которого не задан атрибут required .
Псевдокласс :valid
Применяется к полям формы, содержимое которых проходит проверку в браузере на соответствие указанному типу.
Псевдокласс :invalid
Применяется к полям формы, содержимое которых не соответствует указанному типу.
Псевдокласс :required
Применяет стилевые правила к тегу , у которого установлен атрибут required .
Псевдокласс :target
Применяется к целевому элементу, иными словами, к идентификатору, который указан в адресной строке браузера.
Псевдоклассы
Псевдокласс присоединяется к CSS селекторам, чтобы определить особое состояние данного элемента.
Например, псевдоклассы могут использоваться, чтобы определять
- стили элементов, когда пользователь наводит на них курсор мыши,
- разные стили для посещенных и не посещенных ссылок,
- стиль элемента, когда он получает фокус.
Наведи сюда мышь
Синтаксис
Декларация селектора с псевдоклассом имеет следующий синтаксис:
селектор:псевдокласс
Т.е. псевдокласс ставится после селектора и отделяется от него двоеточием.
Псевдоклассы ссылок
Ссылки могут отображаться разными способами.
Есть четыре псевдокласса ссылки:
- :link — обычная, не посещенная ссылка
- :visited — ссылка, которую пользователь уже посетил
- :hover — ссылка, на которую наведен курсор мыши
- :active — ссылка в момент нажатия
a:link < color: blue; >a:visited < color: purple; >a:active < color: red; >a:hover
Примечание: Чтобы CSS определения состояния ссылки были эффективными, необходимо соблюдать некоторые правила: a:hover должна стоять после a:link и a:visited , а a:active должна стоять после a:hover !
Назначение иного цвета для посещенных ссылок – это хорошая практика, поскольку многие пользователи этого ожидают, хотя CSS предоставляет возможность этого не делать.
Традиционно, не посещенные текстовые ссылки отображаются синим цветом, а посещенные – пурпурным, и есть причины думать, что это наиболее эффективные цвета в данном случае, хотя опять же из-за постоянно растущей популярности CSS среднестатистический пользователь уже больше не ожидает, что ссылка будет синего или пурпурного цвета.
Псевдоклассы и HTML классы
Псевдоклассы можно комбинировать с HTML классами:
a.highlight:hover
Псевдокласс :hover с другими элементами
Кроме всего прочего псевдокласс :hover может использоваться с любыми элементами, а не только со ссылками.
В следующем примере псевдокласс :hover используется с элементом :
div:hover
К сожалению, браузер Internet Explorer не поддерживает такой вариант использования данного псевдокласса. И это чрезвычайно прискорбно, так как лишает возможности применять различные визуальные трюки, которые так восхитительно смотрятся в других браузерах.
Простая появляющаяcя подсказка
Пример простой появляющейся подсказки. При наведении на элемент отображается элемент
:
Наведите сюда, чтобы показать элемент
.
p < display: none; background-color: yellow; padding: 20px; >div:hover p
Псевдокласс :first-child
Псевсдокласс :first-child соответствует заданному элементу, который является первым дочерним элементом другого элемента.
В следующем примере селектор соответствует любому элементу
, который является первым дочерним элементом любого элемента:
p:first-child
В следующем примере селектор соответствует первому элементу внутри всех элементов
:
p i:first-child
В следующем примере селектор соответствует всем элементам внутри элементов
, которые являются первыми дочерними элементами другого элемента:
p:first-child i
Псевдокласс :lang
Псевдокласс :lang позволяет определять особые правила для разных языков.
В следующем примере :lang определяет цитатные символы для элемента с атрибутом lang=»no»:
q:lang(no) Какой-то текст Такая-то цитата
Какой-то текст.
Другие псевдоклассы
Кроме описанных существуют и другие псевдоклассы, которые могут оказаться весьма полезны при определении стилей HTML элементов:
| Псевдокласс | Пример | Описание |
|---|---|---|
| :checked | input:checked | Выбирает каждый элемент со статусом «включен» (с атрибутом checked) |
| :disabled | input:disabled | Выбирает каждый заблокированный элемент (с атрибутом disabled) |
| :empty | p:empty | Выбирает все заданные элементы, у которых нет дочерних элементов |
| :enabled | input:enabled | Выбирает все доступные элементы |
| :first-of-type | p:first-of-type | Выбирает каждый элемент, который является первым дочерним заданным элементом своего родителя |
| :focus | input:focus | Выбирает элемент, на который переведен фокус |
| :in-range | input:in-range | Выбирает элемент со значением в заданном диапазоне |
| :invalid | input:invalid | Выбирает все элементы , значение которых не соответствует указанному типу |
| :last-child | p:last-child | Выбирает каждый элемент, который является последним дочерним элементом своего родителя |
| :last-of-type | p:last-of-type | Выбирает каждый элемент, который является последним дочерним заданным элементом своего родителя |
| :not(селектор) | :not(p) | Выбирает каждый элемент, который не является указанным элементом |
| :nth-child(n) | p:nth-child(2) | Выбирает каждый элемент, который n-й по счету дочерний элемент своего родителя |
| :nth-last-child(n) | p:nth-last-child(2) | Выбирает каждый элемент, который n-й по счету дочерний элемент своего родителя, считая от последнего дочернего элемента |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Выбирает каждый элемент, который n-й по счету дочерний заданный элемент своего родителя, считая от последнего дочернего элемента |
| :nth-of-type(n) | p:nth-of-type(2) | Выбирает каждый элемент, который n-й по счету дочерний заданный элемент своего родителя |
| :only-of-type | p:only-of-type | Выбирает каждый элемент, который является единственным элементом такого типа у своего родителя |
| :only-child | p:only-child | Выбирает каждый элемент, который является единственным дочерним элементом у своего родителя |
| :optional | input:optional | Выбирает элементы формы без атрибута «required» |
| :out-of-range | input:out-of-range | Выбирает элементы , значения которых выходят за пределы заданного диапазона |
| :read-only | input:read-only | Выбирает элементы формы с атрибутом «readonly» |
| :read-write | input:read-write | Выбирает элементы формы без атрибута «readonly» |
| :required | input:required | Выбирает элементы формы с атрибутом «required» |
| :root | root | Выбирает корневой элемент документа |
| :target | #news:target | Выбирает текущий активный элемент (у которого было нажато на URL, содержащее это имя анкора) |
| :valid | input:valid | Выбирает все элементы с вылидным значением |
Псевдоклассы
Псевдоклассы определяют динамическое состояние элементов, которое изменяется с помощью действий пользователя, а также положение в дереве документа. Примером такого состояния служит текстовая ссылка, которая меняет свой цвет при наведении на неё курсора мыши. При использовании псевдоклассов браузер не перегружает текущий документ, поэтому с помощью псевдоклассов можно получить разные динамические эффекты на странице.
Синтаксис применения псевдоклассов следующий.
Вначале указывается селектор, к которому добавляется псевдокласс, затем следует двоеточие, после которого идёт имя псевдокласса. Допускается применять псевдоклассы к именам идентификаторов или классов ( A.menu:hover ), а также к контекстным селекторам ( .menu A:hover ). Если псевдокласс указывается без селектора впереди ( :hover ), то он будет применяться ко всем элементам документа.
Условно все псевдоклассы делятся на три группы:
- определяющие состояние элементов;
- имеющие отношение к дереву элементов;
- указывающие язык текста.
Псевдоклассы, определяющие состояние элементов
К этой группе относятся псевдоклассы, которые распознают текущее состояние элемента и применяют стиль только для этого состояния.
:active
Происходит при активации пользователем элемента. Например, ссылка становится активной, если навести на неё курсор и щёлкнуть мышкой. Несмотря на то, что активным может стать практически любой элемент веб-страницы, псевдокласс :active используется преимущественно для ссылок.
:link
Применяется к непосещенным ссылкам, т. е. таким ссылкам, на которые пользователь ещё не нажимал. Браузер некоторое время сохраняет историю посещений, поэтому ссылка может быть помечена как посещенная хотя бы потому, что по ней был зафиксирован переход ранее.
Запись A <. >и A:link <. >по своему результату равноценна, поскольку в браузере даёт один и тот же эффект, поэтому псевдокласс :link можно не указывать. Исключением являются якоря, на них действие :link не распространяется.
:focus
Применяется к элементу при получении им фокуса. Например, для текстового поля формы получение фокуса означает, что курсор установлен в поле, и с помощью клавиатуры можно вводить в него текст (пример 15.1).
Пример 15.1. Применение псевдокласса :focus
HTML5 CSS 2.1 IE Cr Op Sa Fx
Псевдоклассы
Результат примера показан ниже (рис. 15.1). Во второй строке находится курсор, поэтому текстовое поле получило фокус.
Рис. 15.1. Изменение стиля текста при получении фокуса
В данном примере в текстовом поле содержится предварительный текст, он определяется значением атрибута value тега . При щелчке по элементу формы происходит получение полем фокуса, и цвет текста меняется на красный. Достаточно щёлкнуть в любом месте страницы (кроме текстового поля, естественно), как произойдет потеря фокуса и текст вернётся к первоначальному чёрному цвету.
Результат будет виден только для тех элементов, которые могут получить фокус. В частности, это теги , , и .
:hover
Псевдокласс :hover активизируется, когда курсор мыши находится в пределах элемента, но щелчка по нему не происходит.
:visited
Данный псевдокласс применяется к посещённым ссылкам. Обычно такая ссылка меняет свой цвет по умолчанию на фиолетовый, но с помощью стилей цвет и другие параметры можно задать самостоятельно (пример 15.2).
Пример 15.2. Изменение цвета ссылок
HTML5 CSS 2.1 IE Cr Op Sa Fx
Псевдоклассы Ссылка 1 | Ссылка 2 | Ссылка 3
Результат примера показан на рис. 15.2.
Рис. 15.2. Вид ссылки при наведении на неё курсора мыши
В данном примере показано использование псевдоклассов совместно со ссылками. При этом имеет значение порядок следования псевдоклассов. Вначале указывается :visited , а затем идёт :hover , в противном случае посещённые ссылки не будут изменять свой цвет при наведении на них курсора.
Селекторы могут содержать более одного псевдокласса, которые перечисляются подряд через двоеточие, но только в том случае, если их действия не противоречат друг другу. Так, запись A:visited:hover является корректной, а запись A:link:visited — нет. Впрочем, если подходить формально, то валидатор CSS считает правильным любое сочетание псевдоклассов.
Браузер Internet Explorer 6 и младше позволяет использовать псевдоклассы :active и :hover только для ссылок. Начиная с версии 7.0 псевдоклассы в этом браузере работают и для других элементов.
Псевдокласс :hover не обязательно должен применяться к ссылкам, его можно добавлять и к другим элементам документа. Так, в примере 15.3 показана таблица, строки которой меняют свой цвет при наведении на них курсора мыши. Это достигается за счёт добавления псевдокласса :hover к селектору TR .
Пример 15.3. Выделение строк таблицы
HTML5 CSS 2.1 IE Cr Op Sa Fx
Псевдоклассы Пики Трефы Бубны Червы Чебурашка 5 2 4 2 Крокодил Гена 2 7 1 3 Шапокляк 5 4 3 1 Крыса Лариса 1 0 5 7
Результат примера показан ниже (рис. 15.3).
Рис. 15.3. Выделение строк таблицы при наведении на них курсора мыши
Псевдоклассы, имеющие отношение к дереву документа
К этой группе относятся псевдоклассы, которые определяют положение элемента в дереве документа и применяют к нему стиль в зависимости от его статуса.
:first-child
Применяется к первому дочернему элементу селектора, который расположен в дереве элементов документа. Чтобы стало понятно, о чем речь, разберём небольшой код (пример 15.4).
Пример 15.4. Использование псевдокласса :first-child
HTML5 CSS 2.1 IE Cr Op Sa Fx
Псевдоклассы Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diem nonummy nibh euismod tincidunt ut lacreet dolore magna aliguam erat volutpat.
Ut wisis enim ad minim veniam, quis nostrud exerci tution ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Результат примера показан ниже (рис. 15.4).
Рис. 15.4. Использование псевдокласса :first-child
В данном примере псевдокласс :first-child добавляется к селектору B и устанавливает для него красный цвет текста. Хотя контейнер встречается в первом абзаце три раза, красным цветом будет выделено лишь первое упоминание, т. е. текст «Lorem ipsum». В остальных случаях содержимое контейнера отображается чёрным цветом. Со следующим абзацем всё начинается снова, поскольку родительский элемент поменялся. Поэтому фраза «Ut wisis enim» также будет выделена красным цветом.
Браузер Internet Explorer поддерживает псевдокласс :first-child начиная с версии 7.0.
Псевдокласс :first-child удобнее всего использовать в тех случаях, когда требуется задать разный стиль для первого и остальных однотипных элементов. Например, в некоторых случаях красную строку для первого абзаца текста не устанавливают, а для остальных абзацев добавляют отступ первой строки. С этой целью применяют свойство text-indent с нужным значением отступа. Но чтобы изменить стиль первого абзаца и убрать для него отступ потребуется воспользоваться псевдоклассом :first-child (пример 15.5).
Пример 15.5. Отступы для абзаца
HTML5 CSS 2.1 IE Cr Op Sa Fx
Псевдоклассы Историю эту уже начали забывать, хотя находились горожане, которые время от времени рассказывали ее вновь прибывшим в город посетителям.
Легенда обрастала подробностями и уже совсем не напоминала произошедшее в действительности событие. И, тем не менее, ни один человек не решался заикнуться о ней с наступлением темноты.
Но однажды в город вновь вошел незнакомец. Он хромал на левую ногу.
Результат примера показан ниже (рис. 15.5).
Рис. 15.5. Изменение стиля первого абзаца
В данном примере первый абзац текста не содержит отступа первой строки, а для остальных он установлен.
Псевдоклассы, задающие язык текста
Для документов, одновременно содержащих тексты на нескольких языках имеет значение соблюдение правил синтаксиса, характерные для того или иного языка. С помощью псевдоклассов можно изменять стиль оформления иностранных текстов, а также некоторые настройки.
:lang
Определяет язык, который используется в документе или его фрагменте. В коде HTML язык устанавливается через атрибут lang , он обычно добавляется к тегу . С помощью псевдокласса :lang можно задавать определённые настройки, характерные для разных языков, например, вид кавычек в цитатах. Синтаксис следующий.
В качестве языка могут выступать следующие значения: ru — русский; en — английский ; de — немецкий ; fr — французский; it — итальянский.
Пример 15.6. Вид кавычек в зависимости от языка
HTML5 CSS 2.1 IE Cr Op Sa Fx
lang Цитата на французском языке: Ce que femme veut, Dieu le veut
.
Цитата на немецком: Der Mensch, versuche die Gotter nicht
.
Цитата на английском: То be or not to be
.
Результат данного примера показан на рис. 15.6. Для отображения типовых кавычек в примере используется стилевое свойство quotes , а само переключение языка и соответствующего вида кавычек происходит через атрибут lang , добавляемый к тегу .
Рис. 15.6. Разные кавычки для разных языков
Вопросы для проверки
1. Олег сделал ссылки, которые меняют цвет фона при наведении на них курсора мыши. Для этого он использовал следующий стиль.
Однако некоторые ссылки при наведении на них курсора не меняли свой цвет на чёрный. Почему?
- Код CSS не валидный.
- К селектору A не добавлен псевдокласс :link.
- Псевдокласс :visited стоит после :hover.
- Псевдокласс :active стоит после :visited.
- Неверное значение свойства color у A:hover.
2. Требуется выделить фоновым цветом первую строку таблицы. Какой псевдокласс для этой цели подойдёт?
3. К каким элементам добавляет стиль следующая конструкция — A:link:visited:hover ?
- К непосещённым ссылкам.
- К посещённым ссылкам.
- К любым ссылкам при наведении на них курсора мыши.
- К посещённым ссылкам при наведении на них курсора мыши.
- Ни к одному элементу.
Ответы
1. Псевдокласс :visited стоит после :hover.
3. Ни к одному элементу.
Псевдоклассы, псевдоэлементы
Следующий набор селекторов, который мы рассмотрим, относится к псевдоклассам и псевдоэлементам. Их очень много, и они часто служат довольно специфическим целям. После того как вы узнаете порядок их использования, просмотрите список — не найдётся ли в нём что-либо, что поможет решить стоящую перед вами задачу. Кроме того, будет полезным заглянуть на соответствующую каждому селектору страницу MDN, чтобы прояснить, как его обрабатывает браузер.
| Необходимые условия: | Базовая компьютерная грамотность, установка базового ПО, базовые знания о работе с файлами, основы HTML (изучите Введение в HTML) и понимание работы CSS (изучите Введение в CSS.) |
|---|---|
| Цель: | Узнать о селекторах псевдокласса и псевдоэлемента. |
Что такое псевдокласс?
Псевдокласс — это селектор, который выбирает элементы, находящиеся в специфическом состоянии, например, они являются первым элементом своего типа, или на них наведён указатель мыши. Они обычно действуют так, как если бы вы применили класс к какой-то части вашего документа, что часто помогает сократить избыточные классы в разметке и даёт более гибкий, удобный в поддержке код.
Псевдоклассы — это ключевые слова, которые начинаются с двоеточия:
:pseudo-class-name
Простой пример псевдокласса
Давайте рассмотрим простой пример. Если бы мы хотели сделать шрифт первого абзаца статьи более крупным и жирным, мы могли бы добавить класс к этому абзацу, а затем добавить CSS к этому классу, как показано в первом примере ниже:
Однако поддержка может оказаться утомительной — что если новый абзац будет добавлен в верхнюю часть документа? Тогда нам нужно будет передвинуть класс к новому абзацу. Вместо добавления класса мы могли бы использовать селектор псевдокласса :first-child — он всегда будет нацелен на первый дочерний элемент в статье, и нам больше не нужно будет редактировать HTML (к тому же это не всегда возможно, например, в случае если он генерируется CMS.)
Все псевдоклассы ведут себя подобным образом. Они нацелены на какой-то фрагмент вашего документа, находящийся в определённом состоянии, и ведут себя так, как если бы вы добавили класс в свой HTML. Рассмотрим некоторые другие примеры в MDN:
Примечание: Правильно писать псевдоклассы и элементы без какого бы то ни было предшествующего им селектора элемента. В примере выше вы могли бы написать :first-child и правило было бы применено к любому элементу, оказавшемуся первым дочерним для , не только к первому дочернему абзацу — :first-child равнозначно *:first-child . Однако обычно вы хотите большего контроля, поэтому вам нужен более специфичный селектор.
Псевдоклассы пользовательского действия
Некоторые псевдоклассы применяются только тогда, когда пользователь некоторым образом взаимодействует с документом. Эти псевдоклассы действий пользователя, иногда называемые динамическими псевдоклассами, действуют так, как если бы класс был добавлен к элементу в момент взаимодействия с ним пользователя. Примеры даны для:
- :hover — упоминался выше; он применяется только в том случае, если пользователь наводит указатель мыши на элемент, обычно на ссылку.
- :focus — применяется только в том случае, если пользователь фокусируется на элементе, используя управление с клавиатуры.
Что такое псевдоэлемент?
Псевдоэлементы ведут себя сходным образом, однако они действуют так, как если бы вы добавили в разметку целый новый HTML-элемент, а не применили класс к существующим элементам. Псевдоэлементы начинаются с двойного двоеточия :: .
::pseudo-element-name
Примечание: Некоторые ранние псевдоэлементы использовали синтаксис одинарного двоеточия, которое вы можете иногда видеть в коде или примерах. Современные браузеры поддерживают ранние псевдоэлементы с одинарным или двойным двоеточием синтаксиса для обратной совместимости.
Например, если вы хотите выбрать первую строку абзаца, вы могли бы обернуть её в и использовать селектор элемента; однако это может не сработать, если количество слов, которые вы обернули, будет больше или меньше ширины родительского элемента. Поскольку мы, как правило, не знаем, сколько слов поместится в строке — т.к. их количество меняется, если меняется ширина экрана или размер шрифта — то надёжного решения при помощи HTML нет.
Селектор псевдоэлемента ::first-line сделает это наверняка — если количество слов увеличивается или уменьшается, он всё равно будет выбирать только первую строку.
Он действует так, как если бы волшебным образом был обёрнут вокруг этой первой отформатированной строки и обновлялся бы каждый раз при изменении длины строки.
Вы можете видеть, что селектор выбирает первую строку обоих абзацев.
Объединение псевдоклассов и псевдоэлементов
Если вы хотите сделать шрифт первой строки первого абзаца жирным, вы можете связать вместе селекторы :first-child и ::first-line . Попробуйте отредактировать предыдущий живой пример, чтобы использовалась следующая CSS. Мы говорим, что хотим выбрать первую строку первого элемента
, который находится внутри элемента .
article p:first-child::first-line font-size: 120%; font-weight: bold; >
Генерация контента с помощью ::before и ::after
Существует пара специальных псевдоэлементов, которые используются вместе со свойством content для вставки содержимого в документ с помощью CSS.
Вы можете использовать их для вставки строки текста, как в приведённом ниже живом примере. Попробуйте изменить текстовое значение свойства content и вы увидите, как изменится результат. Можете также изменить псевдоэлемент ::before на ::after и увидите, что текст вставлен в конце элемента, а не в начале.
Однако вставка строк текста из CSS в реальности происходит не слишком часто, поскольку этот текст недоступен для некоторых экранных дикторов и его будет трудно найти и отредактировать в будущем.
Более корректным использованием этих псевдоэлементов является вставка значка, например маленькой стрелки, добавленной в приведённом ниже примере, которая является визуальным указателем, не предназначенным для зачитывания с помощью экранного диктора:
Эти псевдоэлементы также часто используются для вставки пустой строки, которая затем может быть стилизована так же, как и любой элемент на странице.
В следующем примере мы добавили пустую строку, используя псевдоэлемент ::before. Мы установили display: block , чтобы стилизовать его по ширине и высоте. Затем мы используем CSS, чтобы стилизовать его так же, как и любой другой элемент. Вы можете поиграть с CSS и изменить его внешний вид и поведение.
Использование псевдоэлементов ::before и ::after вместе со свойством content в CSS называется «генерируемым контентом» в CSS, и вы часто будете видеть, как этот метод используется для различных задач. Отличным примером является сайт CSS Arrow Please, который помогает вам генерировать стрелку с помощью CSS. Посмотрите на CSS, когда вы создадите свою стрелку, и вы увидите использование псевдо-элементов ::before и ::after . Всякий раз, когда вы будете видеть эти селекторы, смотрите на свойство content , чтобы увидеть, что добавляется в документ..
Справочный раздел
Существует большое количество псевдоклассов и псевдоэлементов, и полезно иметь список, к которому можно обращаться. Ниже приведены таблицы, в которых они перечислены, со ссылками на их справочные страницы в MDN. Используйте эти таблицы как справочник, чтобы видеть массив доступных вам средств для нацеливания на элементы.
Псевдоклассы
| Селектор | Описание |
|---|---|
| :active | Подходит, когда пользователь активирует (например, щёлкает мышью) элемент. |
| :any-link | Соответствует как состоянию :link, так и состоянию :visited ссылки. |
| :blank | Соответствует элементу , для которого значение ввода является пустым. |
| :checked | Соответствует переключателю или флажку в выбранном состоянии. |
| :current (en-US) | Соответствует элементу или предку элемента, который в данный момент отображается. |
| :default | Соответствует одному или нескольким элементам пользовательского интерфейса, которые являются элементами по умолчанию (обрабатывают нажатие клавиши enter) в наборе сходных элементов. |
| :dir | Выбирает элемент на основе его направленности (значение атрибута HTML dir (en-US) или свойства CSS direction ). |
| :disabled | Соответствует элементам пользовательского интерфейса, которые находятся в отключённом состоянии. |
| :empty | Соответствует элементу, у которого нет дочерних элементов, кроме необязательного пробела. |
| :enabled | Соответствует элементам пользовательского интерфейса, которые находятся во включённом состоянии. |
| :first | В постраничном носителе соответствует первой странице. |
| :first-child | Соответствует элементу, который является первым среди других дочерних элементов одного предка. |
| :first-of-type | Соответствует элементу, который является первым определённого типа среди других дочерних элементов одного предка. |
| :focus | Соответствует элементу, имеющему фокус. |
| :focus-visible | Соответствует элементу, имеющему фокус, при этом фокус должен быть виден пользователю. |
| :focus-within | Соответствует элементу с фокусом, а также элементу с потомком, который имеет фокус. |
| :future (en-US) | Соответствует элементам после текущего элемента. |
| :hover | Соответствует элементу, на который наведён курсор мыши. |
| :indeterminate | Соответствует элементам пользовательского интерфейса, значение которых находится в неопределённом состоянии, обычно checkboxes (en-US) . |
| :in-range | Соответствует элементу с диапазоном, когда его значение находится в пределах диапазона. |
| :invalid | Соответствует элементу, например , в недопустимом состоянии. |
| :lang | Соответствует элементу, основанному на языке (значение атрибута HTML lang). |
| :last-child | Соответствует элементу, который является последним среди других дочерних элементов одного предка. |
| :last-of-type | Соответствует элементу, который является последним определённого типа среди других дочерних элементов одного предка. |
| :left | В постраничном носителе соответствует левосторонним страницам. |
| :link | Соответствует непосещавшимся ссылкам. |
| :local-link (en-US) | Соответствует ссылкам, указывающим на страницы, которые расположены на том же сайте, что и текущий документ. |
| :is() | Соответствует любому селектору из полученного списка селекторов. |
| :not | Соответствует объектам, не входящим в список селекторов, переданный в качестве значения этому селектору. |
| :nth-child | Соответствует элементам из списка дочерних элементов одного предка, которые подобраны по формуле вида an+b (например, 2n + 1 будет соответствовать элементам 1, 3, 5, 7 и т. д. Все нечётные числа.) |
| :nth-of-type | Соответствует элементам из списка дочерних элементов одного предка, имеющим определённый тип (например, элементы
) — дочерние элементы подобраны по формуле вида an+b (например, 2n + 1 будет соответствовать элементам 1, 3, 5, 7 и т. д. Все нечётные числа.) |
| :nth-last-child | Соответствует элементам из списка дочерних элементов одного предка, считая в обратном порядке от конца. Дочерние элементы подобраны по формуле вида an+b (например, 2n + 1 будет соответствовать последнему элементу в последовательности, затем на два элемента до него, затем ещё на два элемента назад и т. д. Все нечётные, считая с конца.) |
| :nth-last-of-type | Соответствует элементам из списка дочерних элементов одного предка, имеющим определённый тип (например, элементы
), считая в обратном порядке от конца. Дочерние элементы подобраны по формуле вида an+b (например, 2n + 1 будет соответствовать последнему элементу этого типа в последовательности, затем на два элемента до него, затем ещё на два элемента назад и т. д. Все нечётные, считая с конца.) |
| :only-child | Соответствует элементу, являющемуся единственным дочерним для своего предка. |
| :only-of-type | Соответствует элементу, который отличается по типу от всех других дочерних элементов общего предка. |
| :optional | Соответствует необязательным элементам формы. |
| :out-of-range | Соответствует элементу с диапазоном, когда его значение находится вне диапазона. |
| :past (en-US) | Соответствует элементам перед текущим элементом. |
| :placeholder-shown | Соответствует элементу input, который показывает текст-заполнитель. |
| :playing (en-US) | Соответствует элементу, представляющему аудио, видео или подобный ресурс с возможными состояниями «воспроизведён» или «приостановлен», когда этот элемент «воспроизводится». |
| :paused (en-US) | Соответствует элементу, представляющему аудио, видео или подобный ресурс с возможными состояниями «воспроизведён» или «приостановлен», когда этот элемент «приостановлен». |
| :read-only | Соответствует элементу, который не может быть изменён пользователем. |
| :read-write | Соответствует элементу, который может быть изменён пользователем. |
| :required | Соответствует обязательным элементам формы. |
| :right | В постраничном носителе соответствует правосторонним страницам. |
| :root | Соответствует элементу, который является корнем документа. |
| :scope (en-US) | Соответствует любому элементу, который является элементом области видимости. |
| :valid | Соответствует элементу, такому как , в допустимом состоянии. |
| :target | Соответствует элементу, если он является целью текущего URL (т. е. если у него есть ID, соответствующий текущему URL fragment). |
| :visited | Соответствует посещённым ссылкам. |
Псевдоэлементы
- Назад
- Обзор: Building blocks
- Далее
В этом модуле
- Каскад и наследование
- Селекторы CSS
- Селекторы типа, класса и ID
- Селекторы атрибута
- Псевдоклассы и псевдоэлементы
- Комбинаторы
- Модель коробки
- Фон и границы
- Обработка разных направлений текста
- Переполнение содержимого
- Значения и единицы измерения
- Изменение размеров в CSS
- Элементы изображений, форм и медиа-элементы
- Стилизация таблиц
- Отладка CSS
- Организация вашей CSS (en-US)(en-US)
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.