Псевдоклассы — CSS | MDN
Псевдокласс в CSS — это ключевое слово, добавленное к селектору, которое определяет его особое состояние. Например, :hover
может быть использован для изменения цвета кнопки при наведении курсора на неё.
div:hover { background-color: #F89B4D; }
Псевдоклассы дают возможность стилизовать элемент на основе не только отношений в DOM-дереве, но и основываясь на внешних факторах, таких как история посещений (например, :visited
), состояние содержимого (вроде :checked
у некоторых элементов формы) или позиции курсора мыши (например, :hover
определяет, находится ли курсор мыши над элементом).
Примечание: В отличие от псевдоклассов, псевдоэлементы могут быть использованы для стилизации определённой части элемента.
selector:pseudo-class { property: value; }
Как и с обычными классами, можно совмещать вместе в одном селекторе любое число псевдоклассов.
:active
:any
(en-US):any-link
:checked
:default
:defined
:dir()
:disabled
:empty
:enabled
:first
:first-child
:first-of-type
:fullscreen
:focus
:hover
:indeterminate
:in-range
:invalid
:lang()
:last-child
:last-of-type
:left
:link
:not()
:nth-child()
:nth-last-child()
:nth-last-of-type()
:nth-of-type()
:only-child
:only-of-type
:optional
:out-of-range
:read-only
:read-write
:required
:right
:root
:scope
(en-US):target
:valid
:visited
Спецификация | Статус | Комментарий |
---|---|---|
Fullscreen API | Живой стандарт | Определён :fullscreen . |
HTML Living Standard | Живой стандарт | Нет изменений от HTML5. |
Selectors Level 4 | Рабочий черновик | Определены :any-link , :local-link , :scope , :active-drop-target , :valid-drop-target , :invalid-drop-target , :current , :past , :future , :placeholder-shown , :user-error , :blank , :nth-match() , :nth-last-match() , :nth-column() , :nth-last-column() и :matches() . Нет существенных изменений для псевдоклассов, определённых в Selectors Level 3 и HTML5 (не рассматривая семантическое значение). |
HTML5 | Рекомендация | Определено семантическое значение в HTML контексте для :link , :visited , :active , :enabled , :disabled , :checked и :indeterminate . Определены :default , :valid , :invalid , :in-range , :out-of-range , :required , :optional , :read-only , :read-write и :dir() . |
CSS Basic User Interface Module Level 3 | Рекомендация | Определены :default , :valid , :invalid , :in-range , :out-of-range , :required , :optional , :read-only и :read-write , но без связанного семантического значения. |
Selectors Level 3 | Рекомендация | Определены :target , :root , :nth-child() , :nth-last-of-child() , :nth-of-type() , :nth-last-of-type() , :last-child , :first-of-type , :last-of-type :only-child , :only-of-type , :empty и :not() . Определён синтаксис для :enabled , :disabled , :checked и :indeterminate , но без связанного семантического значения. Нет значительных изменений для псевдоклассов, определённых в CSS Level 2 (Revision 1). |
CSS Level 2 (Revision 1) | Рекомендация | Определены :lang() , :first-child , :hover и :focus . Нет значительных изменений для псевдоклассов, определённых в CSS Level 1. |
CSS Level 1 | Рекомендация | Определены :link , :visited и :active , но без связанного семантического значения. |
- Псевдоэлементы
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
Want to get more involved?
Learn how to contribute.
This page was last modified on by MDN contributors.
Псевдоклассы, псевдоэлементы — Изучение веб-разработки
- Назад
- Обзор: Building blocks
- Далее
Следующий набор селекторов, который мы рассмотрим, относится к псевдоклассам и псевдоэлементам. Их очень много, и они часто служат довольно специфическим целям. После того как вы узнаете порядок их использования, просмотрите список — не найдётся ли в нём что-либо, что поможет решить стоящую перед вами задачу. Кроме того, будет полезным заглянуть на соответствующую каждому селектору страницу MDN, чтобы прояснить, как его обрабатывает браузер.
Необходимые условия: | Базовая компьютерная грамотность, установка базового ПО, базовые знания о работе с файлами, основы HTML (изучите Введение в HTML) и понимание работы CSS (изучите Введение в CSS.) |
---|---|
Цель: | Узнать о селекторах псевдокласса и псевдоэлемента. |
Псевдокласс — это селектор, который выбирает элементы, находящиеся в специфическом состоянии, например, они являются первым элементом своего типа, или на них наведён указатель мыши. Они обычно действуют так, как если бы вы применили класс к какой-то части вашего документа, что часто помогает сократить избыточные классы в разметке и даёт более гибкий, удобный в поддержке код.
Псевдоклассы — это ключевые слова, которые начинаются с двоеточия:
:pseudo-class-name
Простой пример псевдокласса
Давайте рассмотрим простой пример. Если бы мы хотели сделать шрифт первого абзаца статьи более крупным и жирным, мы могли бы добавить класс к этому абзацу, а затем добавить CSS к этому классу, как показано в первом примере ниже:
Однако поддержка может оказаться утомительной — что если новый абзац будет добавлен в верхнюю часть документа? Тогда нам нужно будет передвинуть класс к новому абзацу. Вместо добавления класса мы могли бы использовать селектор псевдокласса :first-child
— он всегда будет нацелен на первый дочерний элемент в статье, и нам больше не нужно будет редактировать HTML (к тому же это не всегда возможно, например, в случае если он генерируется CMS. )
Все псевдоклассы ведут себя подобным образом. Они нацелены на какой-то фрагмент вашего документа, находящийся в определённом состоянии, и ведут себя так, как если бы вы добавили класс в свой HTML. Рассмотрим некоторые другие примеры в MDN:
:last-child
:only-child
:invalid
Примечание: : Правильно писать псевдоклассы и элементы без какого бы то ни было предшествующего им селектора элемента. В примере выше вы могли бы написать :first-child
и правило было бы применено к любому элементу, оказавшемуся первым дочерним для
, не только к первому дочернему абзацу — :first-child
равнозначно *:first-child
. Однако обычно вы хотите большего контроля, поэтому вам нужен более специфичный селектор.
Псевдоклассы пользовательского действия
Некоторые псевдоклассы применяются только тогда, когда пользователь некоторым образом взаимодействует с документом. Эти псевдоклассы действий пользователя, иногда называемые динамическими псевдоклассами, действуют так, как если бы класс был добавлен к элементу в момент взаимодействия с ним пользователя. Примеры даны для:
:hover
— упоминался выше; он применяется только в том случае, если пользователь наводит указатель мыши на элемент, обычно на ссылку.:focus
— применяется только в том случае, если пользователь фокусируется на элементе, используя управление с клавиатуры.
Псевдоэлементы ведут себя сходным образом, однако они действуют так, как если бы вы добавили в разметку целый новый HTML-элемент, а не применили класс к существующим элементам. Псевдоэлементы начинаются с двойного двоеточия ::
.
::pseudo-element-name
Примечание: Некоторые ранние псевдоэлементы использовали синтаксис одинарного двоеточия, которое вы можете иногда видеть в коде или примерах. Современные браузеры поддерживают ранние псевдоэлементы с одинарным или двойным двоеточием синтаксиса для обратной совместимости.
Например, если вы хотите выбрать первую строку абзаца, вы могли бы обернуть её в <span>
и использовать селектор элемента; однако это может не сработать, если количество слов, которые вы обернули, будет больше или меньше ширины родительского элемента. Поскольку мы, как правило, не знаем, сколько слов поместится в строке — т.к. их количество меняется, если меняется ширина экрана или размер шрифта — то надёжного решения при помощи HTML нет.
Селектор псевдоэлемента ::first-line
сделает это наверняка — если количество слов увеличивается или уменьшается, он всё равно будет выбирать только первую строку.
Он действует так, как если бы <span>
волшебным образом был обёрнут вокруг этой первой отформатированной строки и обновлялся бы каждый раз при изменении длины строки.
Вы можете видеть, что селектор выбирает первую строку обоих абзацев.
Если вы хотите сделать шрифт первой строки первого абзаца жирным, вы можете связать вместе селекторы :first-child
и ::first-line
. Попробуйте отредактировать предыдущий живой пример, чтобы использовалась следующая CSS. Мы говорим, что хотим выбрать первую строку первого элемента <p>,
который находится внутри элемента <article>
.
article p:first-child::first-line { font-size: 120%; font-weight: bold; }
Существует пара специальных псевдоэлементов, которые используются вместе со свойством 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 | Соответствует элементу <input> , для которого значение ввода является пустым. |
:checked | Соответствует переключателю или флажку в выбранном состоянии. |
:current (en-US) | Соответствует элементу или предку элемента, который в данный момент отображается. |
:default | Соответствует одному или нескольким элементам пользовательского интерфейса, которые являются элементами по умолчанию (обрабатывают нажатие клавиши enter) в наборе сходных элементов. |
:dir | Выбирает элемент на основе его направленности (значение атрибута HTML dir или свойства 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 | Соответствует элементу, например <input> , в недопустимом состоянии. |
: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 | Соответствует элементам из списка дочерних элементов одного предка, имеющим определённый тип (например, элементы <p>) — дочерние элементы подобраны по формуле вида an+b (например, 2n + 1 будет соответствовать элементам 1, 3, 5, 7 и т. д. Все нечётные числа.) |
:nth-last-child | Соответствует элементам из списка дочерних элементов одного предка, считая в обратном порядке от конца. Дочерние элементы подобраны по формуле вида an+b (например, 2n + 1 будет соответствовать последнему элементу в последовательности, затем на два элемента до него, затем ещё на два элемента назад и т. д. Все нечётные, считая с конца.) |
:nth-last-of-type | Соответствует элементам из списка дочерних элементов одного предка, имеющим определённый тип (например, элементы <p>), считая в обратном порядке от конца. Дочерние элементы подобраны по формуле вида 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 | Соответствует элементу, такому как <input>, в допустимом состоянии. |
:target | Соответствует элементу, если он является целью текущего URL (т. е. если у него есть ID, соответствующий текущему URL fragment). |
:visited | Соответствует посещённым ссылкам. |
Псевдоэлементы
Селектор | Описание |
---|---|
::after | Соответствует элементу, который допускает стилизацию и появляется после текущего содержимого порождающего элемента. |
::before | Соответствует элементу, который допускает стилизацию и появляется перед текущим содержимым порождающего элемента. |
::first-letter | Соответствует первой букве элемента. |
::first-line | Соответствует первой строке содержимого порождающего элемента. |
::grammar-error | Соответствует части документа, содержащей грамматическую ошибку, отмеченную браузером. |
::marker | Соответствует полю маркера пункта списка, которое обычно содержит жирную точку или число. |
::selection | Соответствует части документа, которая была выбрана. |
::spelling-error (en-US) | Соответствует части документа, содержащей орфографическую ошибку, отмеченную браузером. |
- Назад
- Обзор: Building blocks
- Далее
- Каскад и наследование
- Селекторы CSS
- Селекторы типа, класса и ID
- Селекторы атрибута
- Псевдоклассы и псевдоэлементы
- Комбинаторы
- Модель коробки
- Фон и границы
- Обработка разных направлений текста
- Переполнение содержимого
- Значения и единицы измерения
- Изменение размеров в CSS
- Элементы изображений, форм и медиа-элементы
- Стилизация таблиц
- Отладка CSS
- Организация вашей CSS
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
Want to get more involved?
Learn how to contribute.
This page was last modified on by MDN contributors.
Псевдоклассы — CSS: каскадные таблицы стилей
Псевдокласс CSS — это ключевое слово, добавляемое к селектору, которое определяет особое состояние выбранных элементов. Например, псевдокласс :hover
можно использовать для выбора кнопки, когда указатель пользователя наводит на кнопку, и затем для этой выбранной кнопки можно задать стиль.
/* Любая кнопка, над которой находится указатель пользователя */ кнопка:наведите { цвет синий; }
Псевдокласс состоит из двоеточия ( :
), за которым следует имя псевдокласса (например, :hover
). Функциональный псевдокласс также содержит пару скобок для определения аргументов (например, :dir()
). Элемент, к которому прикреплен псевдокласс, определяется как элемент привязки (например, кнопка
в случае button:hover
).
Псевдоклассы позволяют применить стиль к элементу не только по отношению к содержимому дерева документа, но и по отношению к внешним факторам, таким как история навигатора ( :visited
, например), состояние его содержимого (например, :checked
для определенных элементов формы) или положение мыши (например, :hover
, которое позволяет узнать, находится ли мышь над элементом или нет).
Примечание: В отличие от псевдоклассов псевдоэлементы могут использоваться для стилизации конкретной части элемента.
Эти псевдоклассы позволяют выбирать элементы на основе их состояний отображения.
-
:полноэкранный режим
Соответствует элементу, который в данный момент находится в полноэкранном режиме.
-
:модальный
Соответствует элементу, находящемуся в состоянии, в котором исключается любое взаимодействие с внешними элементами до тех пор, пока взаимодействие не будет отклонено.
-
:картинка в картинке
Соответствует элементу, который в данный момент находится в режиме «картинка в картинке».
Эти псевдоклассы относятся к элементам формы и позволяют выбирать элементы на основе атрибутов HTML и состояния, в котором находится поле до и после взаимодействия.
-
:автозаполнение
Соответствует, когда
-
:включено
Представляет элемент пользовательского интерфейса, находящийся во включенном состоянии.
-
:отключено
Представляет элемент пользовательского интерфейса, который находится в отключенном состоянии.
-
:только для чтения
Представляет любой элемент, который не может быть изменен пользователем.
-
: чтение-запись
Представляет любой элемент, редактируемый пользователем.
-
: показан заполнитель
Соответствует элементу ввода, отображающему текст-заполнитель. Например, он будет соответствовать
заполнитель
атрибут в элементах.
-
:по умолчанию
-
Соответствует одному или нескольким элементам пользовательского интерфейса, которые используются по умолчанию среди набора элементов.
-
: проверено
-
Соответствует включению таких элементов, как флажки и переключатели.
-
:неопределенный
-
Соответствует элементам пользовательского интерфейса, когда они находятся в неопределенном состоянии.
-
:пусто
-
Соответствует пустому элементу пользовательского ввода, содержащему пустую строку или другой нулевой ввод.
-
:действительный
-
Соответствует элементу с допустимым содержимым. Например, элемент ввода с типом «электронная почта», который содержит правильно сформированный адрес электронной почты или пустое значение, если элемент управления не требуется.
-
:недействительный
-
Соответствует элементу с недопустимым содержимым. Например, элемент ввода с типом «электронная почта» с введенным именем.
-
:в диапазоне
-
Применяется к элементам с ограничениями диапазона. Например, ползунок управления, когда выбранное значение находится в допустимом диапазоне.
-
:вне диапазона
-
Применяется к элементам с ограничениями диапазона. Например, ползунок, когда выбранное значение выходит за пределы допустимого диапазона.
-
:требуется
-
Соответствует, когда требуется элемент формы.
-
:опционально
-
Соответствует, когда элемент формы является необязательным.
-
:недействительный пользователь
-
Представляет элемент с неправильным вводом, но только когда пользователь взаимодействовал с ним.
Эти псевдоклассы отражают язык документа и позволяют выбирать элементы на основе языка или направления письма.
-
:дир()
-
Псевдокласс направленности выбирает элемент на основе его направленности, определенной языком документа.
-
:язык()
-
Выберите элемент на основе языка его содержимого.
Эти псевдоклассы относятся к ссылкам и целевым элементам в текущем документе.
-
: любая ссылка
-
Соответствует элементу, если элемент соответствует либо
:link
, либо:visited
. -
:ссылка
-
Соответствует ссылкам, которые еще не посещались.
-
:посетили
-
Соответствует посещенным ссылкам.
-
: локальная ссылка
-
Соответствует ссылкам, абсолютный URL-адрес которых совпадает с целевым URL-адресом. Например, якорные ссылки на одну и ту же страницу.
-
: цель
-
Соответствует элементу, который является целью URL-адреса документа.
-
: цель в пределах
-
Соответствует элементам, которые являются целью URL-адреса документа, а также элементам, у которых есть потомок, являющийся целью URL-адреса документа.
-
:прицел
-
Представляет элементы, которые являются ориентиром для сопоставления селекторов.
Эти псевдоклассы применяются к носителям, способным находиться в состоянии, в котором они могут быть описаны как воспроизводимые, например к видео.
-
:воспроизведение
-
Представляет элемент мультимедиа, который может воспроизводиться во время воспроизведения этого элемента.
-
:пауза
-
Представляет элемент мультимедиа, который может воспроизводиться, когда этот элемент приостановлен.
Эти псевдоклассы применяются при просмотре того, что имеет синхронизацию, например дорожки субтитров WebVTT.
-
:текущий
-
Представляет элемент или предка отображаемого элемента.
-
:прошлое
-
Представляет элемент, который полностью предшествует элементу
:current
. -
:будущее
-
Представляет элемент, который полностью следует за элементом
:current
.
Эти псевдоклассы относятся к расположению элемента в дереве документа.
-
:корень
-
Представляет элемент, являющийся корнем документа. В HTML это обычно элемент
-
:пусто
-
Представляет элемент без дочерних элементов, кроме пробельных символов.
-
:n-й ребенок
-
Использует нотацию
An+B
для выбора элементов из списка родственных элементов. -
:n-последний ребенок
-
Использует нотацию
An+B
для выбора элементов из списка одноуровневых элементов, считая в обратном порядке от конца списка. -
:первый ребенок
-
Соответствует элементу, который является первым из своих братьев и сестер.
-
:последний ребенок
-
Соответствует элементу, который является последним из своих братьев и сестер.
-
:единственный ребенок
-
Соответствует элементу, у которого нет братьев и сестер. Например, элемент списка без других элементов списка в этом списке.
-
:n-й тип
-
Использует нотацию
An+B
для выбора элементов из списка одноуровневых элементов, которые соответствуют определенному типу из списка одноуровневых элементов. -
:n-последний тип
-
Использует нотацию
An+B
для выбора элементов из списка одноуровневых элементов, которые соответствуют определенному типу из списка одноуровневых элементов, считая в обратном порядке от конца списка. -
:первый в своем роде
-
Соответствует элементу, который является первым из своих братьев и сестер, а также соответствует определенному селектору типа.
-
:последний тип
-
Соответствует элементу, который является последним из его братьев и сестер, а также соответствует определенному селектору типа.
-
:только тип
-
Соответствует элементу, у которого нет братьев и сестер выбранного селектора типа.
Эти псевдоклассы требуют некоторого взаимодействия со стороны пользователя для их применения, например удержания указателя мыши над элементом.
-
:наведение
-
Соответствует, когда пользователь указывает элемент с помощью указывающего устройства, например, удерживая указатель мыши над элементом.
-
:активный
-
Соответствует моменту активации элемента пользователем. Например, при нажатии на элемент.
-
:фокус
-
Соответствует, когда элемент находится в фокусе.
-
: видимый фокус
-
Соответствует, когда элемент имеет фокус, и пользовательский агент определяет, что элемент должен быть явно сфокусирован.
-
:фокус внутри
-
Соответствует элементу, к которому применяется
:focus
, а также любому элементу, у которого есть потомок, к которому:focus
применяется.
Эти псевдоклассы принимают в качестве параметра список селекторов или список прощающих селекторов.
-
:есть()
-
Псевдокласс match-any соответствует любому элементу, который соответствует любому из селекторов в предоставленном списке. Список прощающий.
-
:не()
-
Псевдокласс отрицания или отсутствия совпадений представляет любой элемент, не представленный его аргументом.
-
:где()
-
Псевдокласс настройки специфичности соответствует любому элементу, который соответствует любому из селекторов в предоставленном списке, без добавления веса специфичности. Список прощающий.
-
:есть()
-
Реляционный псевдокласс представляет элемент, если любой из относительных селекторов совпадает при привязке к присоединенному элементу.
селектор: псевдокласс { стоимость имущества; }
Как и обычные классы, в селекторе можно объединить столько псевдоклассов, сколько нужно.
Псевдоклассы, определенные набором спецификаций CSS, включают следующее:
A
-
:active
-
: любая ссылка
-
:автозаполнение
B
-
:пусто
Экспериментальный
C
-
:проверено
-
: текущий
Экспериментальный
D
-
:по умолчанию
-
: определено
-
:дир()
Экспериментальный -
:отключено
E
-
:пусто
-
:включено
F
-
:первый
-
:первый ребенок
-
:первый тип
-
:полноэкранный режим
-
:будущее
Expect behavior to change in the future.»> Экспериментальный -
:фокус
-
: видимый фокус
-
: фокус внутри
Н
-
:has()
Экспериментальный -
: хост
-
:хост()
-
:хост-контекст()
Экспериментальный -
:наведение
I
-
:неопределенный
-
:в диапазоне
-
: неверный
-
:есть()
Л
-
:язык()
-
:последний ребенок
-
:последний тип
-
:слева
-
:ссылка
-
: локальная ссылка
Expect behavior to change in the future.»> Экспериментальный
М
-
: модальный
N
-
:не()
-
:n-й ребенок()
-
:n-й столбец()
Экспериментальный -
:n-последний-дочерний()
-
:n-последний столбец()
Экспериментальный -
:n-последний-типа()
-
:n-й тип()
О
-
:только ребенок
-
:только тип
-
:опционально
-
:вне диапазона
P
-
:прошлое
Экспериментальный -
:картинка в картинке
-
: показан заполнитель
-
:пауза
-
:игра
R
-
:только для чтения
-
: чтение-запись
-
: требуется
-
:право
-
:корень
S
-
:прицел
-
:состояние()
Expect behavior to change in the future.»> Экспериментальный
T
-
: цель
-
: цель в пределах
Экспериментальный
U
-
: неверный пользователь
Экспериментальный
В
-
:действительно
-
:посетили
Вт
-
:где()
Specification |
---|
HTML Standard # pseudo-classes |
Selectors Level 4 |
CSS Basic User Interface Module Level 4 |
- Псевдоэлементы
Обнаружили проблему с содержанием этой страницы?
- Отредактируйте страницу на GitHub.
- Сообщить о проблеме с содержимым.
- Просмотрите исходный код на GitHub.
Хотите принять участие?
Узнайте, как внести свой вклад.
Последний раз эта страница была изменена участниками MDN.
Псевдоклассы CSS
❮ Предыдущий Далее ❯
Что такое псевдоклассы?
Псевдокласс используется для определения особого состояния элемента.
Например, его можно использовать для:
- стилизации элемента при наведении на него указателя мыши
- Стиль посещенных и непосещенных ссылок по-разному
- Стиль элемента, когда он получает фокус
Mouse Over Me
Синтаксис
Синтаксис псевдоклассов:
selector:pseudo-class {
свойство: значение;
}
Якорь Псевдоклассы
Ссылки могут отображаться по-разному:
Пример
/* непросмотренная ссылка */
a:link {
color: #FF0000;
}
/* посещено
ссылка */
a:visited {
color: #00FF00;
}
/* указатель мыши над ссылкой */
a:hover {
color: #FF00FF;
}
/* выбранная ссылка */
a:active {
color: #0000FF;
}
Попробуйте сами »
Примечание: a:hover
ДОЛЖЕН идти после а: ссылка
и
a: посетил
в определении CSS, чтобы быть эффективным! a:active
ДОЛЖЕН идти после
a:hover
в определении CSS, чтобы быть эффективным!
Имена псевдоклассов не чувствительны к регистру.
Псевдоклассы и классы HTML
Псевдоклассы можно комбинировать с классами HTML:
Когда вы наводите курсор на ссылку в примере, она меняет цвет:
Пример
a.highlight:hover {
цвет: #ff0000;
}
Попробуйте сами »
Наведите курсор на
Пример использования псевдокласса :hover
на элементе
Пример
div:2color background : синий;
}
Попробуйте сами »
Простая всплывающая подсказка
Наведите указатель мыши на элемент
(например, всплывающую подсказку):
Наведите указатель мыши на меня, чтобы отобразить элемент
.
Тада! А вот и я!
Пример
p {
отображение: нет;
цвет фона: желтый;
отступ: 20 пикселей;
}
div:hover p {
display: block;
}
Попробуйте сами »
CSS — Псевдокласс :first-child
Псевдокласс :first-child
соответствует указанному элементу, который является первым потомком другого элемента.
Совпадение с первым элементом
В следующем примере селектор соответствует любому элементу
, который является первым дочерним элементом любого элемента:
Пример
p:first-child
{
цвет синий;
}
Попробуйте сами »
Соответствует первому элементу
во всех элементах
В следующем примере селектор сопоставляется с первым элементом во всех элементах
:
Пример
p i:первый ребенок
{
цвет синий;
}
Попробуйте сами »
Соответствует всем элементам
во всех первых дочерних элементах
В следующем примере селектор сопоставляет все элементы в элементах
, которые являются первыми дочерними элементами другого element:
Пример
p:first-child i
{
цвет: синий;
}
Попробуйте сами »
CSS — Псевдокласс :lang
Псевдокласс :lang
позволяет вам определять специальные правила для разных языков.
В приведенном ниже примере :lang
определяет кавычки для элементов с lang=»no»:
Пример
Некоторый текст Цитата в абзаце
Немного текста.
Попробуйте сами »
Дополнительные примеры
Добавление различных стилей к гиперссылкам
В этом примере показано, как добавить другие стили к гиперссылкам.
Использование :focus
В этом примере показано, как использовать псевдокласс :focus.
Проверьте себя с помощью упражнений
Упражнение:
Установите красный цвет фона при наведении указателя мыши на ссылку.
<стиль> { цвет фона: красный; } стиль> <тело>Это заголовок.
Это абзац.
com">Это ссылка. тело>
Начать упражнение
Все псевдоклассы CSS
Селектор | Пример | Пример описания |
---|---|---|
:активный | а: активен | Выбирает активную ссылку |
:проверено | ввод:проверено | Выбирает каждый проверенный элемент |
: отключено | ввод: отключен | Выбирает каждый отключенный элемент |
:пусто | р:пусто | Выбирает каждый элемент , у которого нет дочерних элементов |
: включено | ввод: включен | Выбирает каждый включенный элемент |
:первый ребенок | р: первый ребенок | Выбирает все элементы , которые являются первыми дочерними элементами своего родителя |
:первый тип | p: первый тип | Выбирает каждый элемент , который является первым элементом своего родителя |
:фокус | ввод: фокус | Выбирает элемент с фокусом |
:наведение | а:наведите | Выбирает ссылки при наведении мыши |
:в диапазоне | ввод: в диапазоне | Выбирает элементы со значением в указанном диапазоне |
: неверный | ввод: неверный | Выбирает все элементы с недопустимым значением |
:язык( язык ) | p:язык(ит) | Выбирает каждый элемент со значением атрибута lang, начинающимся с «it» |
:последний ребенок | р:последний ребенок | Выбирает все элементы , которые являются последними дочерними элементами родительского элемента |
:последний тип | p:последний тип | Выбирает каждый элемент , который является последним элементом своего родителя |
:ссылка | а: ссылка | Выбирает все непросмотренные ссылки |
:не (селектор) | :не (р) | Выбирает каждый элемент, который не является элементом
|
:n-й ребенок (n) | p:nth-ребенок(2) | Выбирает каждый элемент , который является вторым дочерним элементом своего родителя |
: n-последний ребенок (n) | p:n-последний-потомок(2) | Выбирает каждый элемент , который является вторым дочерним элементом своего родителя, считая от последнего дочернего элемента |
:n-последний тип(n) | p:n-последний тип(2) | Выбирает каждый элемент , который является вторым элементом своего родителя, считая от последнего дочернего элемента |
:n-й тип(n) | p:n-го типа(2) | Выбирает каждый элемент , который является вторым элементом своего родителя |
:только тип | p: только тип | Выбирает каждый элемент , который является единственным элементом своего родителя |
: единственный ребенок | р: единственный ребенок | Выбирает каждый элемент , который является единственным потомком своего родителя |
: опционально | ввод: опционально | Выбирает элементы без обязательного атрибута |
:вне диапазона | ввод: вне диапазона | Выбирает элементы со значением вне указанного диапазона |
: только для чтения | ввод: только для чтения | Выбирает элементы с указанным атрибутом «только для чтения» |
: чтение-запись | ввод: чтение-запись | Выбирает элементы без атрибута «только для чтения» |
:обязательно | ввод: требуется | Выбирает элементы с указанным обязательным атрибутом |
: корень | корень | Выбирает корневой элемент документа |
: цель | #новости:цель | Выбирает текущий активный элемент #news (щелчок по URL-адресу, содержащему это имя привязки) |
: действительный | ввод: действительный | Выбирает все элементы с допустимым значением |
:посетили | а: посетил | Выбирает все посещенные ссылки |
Все псевдоэлементы CSS
Селектор | Пример | Пример описания |
---|---|---|
::после | р::после | Вставить содержимое после каждого элемента
|
::до | р::до | Вставить содержимое перед каждым элементом
|
:: первая буква | p:: первая буква | Выбирает первую букву каждого элемента
|
:: первая линия | p::первая строка | Выбирает первую строку каждого элемента
|
:: маркер | :: маркер | Выбирает маркеры элементов списка |
::выбор | p::выбор | Выбирает часть элемента, выбранную пользователем |
❮ Предыдущий Следующий ❯
ВЫБОР ЦВЕТА
Лучшие учебники
Учебник HTMLУчебник CSS
Учебник JavaScript
Учебник How To
Учебник SQL
Учебник Python
Учебник W3. CSS
Учебник Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery
Лучшие ссылки
HTML ReferenceCSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference
Top7 Examples
Примеры HTML
Примеры CSS
Примеры JavaScript
Как сделать Примеры
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
FORUM | О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.