4.5 KiB
title | localeTitle |
---|---|
Pseudo | Псевдо |
Псевдоселекторы
Псевдоселекторами предусмотрена возможность целевых элементов с использованием псевдоклассов или псевдоэлементов.
Структурные псевдоклассы
Структурные псевдо-классы предлагают способ нацеливания элементов на основе их положения.
Класс | Описание --------- | ------------ :root
| Корень документа. В контексте HTML-документов это будет html
тег вверху. Это может означать разные элементы в других документах, таких как XML или SVG. :only-child
| Элемент, который является единственным дочерним элементом его родительского элемента. :first-child
| Первый ребенок родителя. :last-child
| Последний дочерний элемент родительского элемента. :nth-child(n)
| n-й дочерний элемент родителя. :nth-last-child(n)
| n-й ребенок от последнего ребенка. Реверс :nth-child
. :only-of-type
| Единственный элемент типа внутри своих братьев и сестер с другими типами. :first-of-type
| Первый элемент типа среди его братьев и сестер. :last-of-type
| Последний элемент типа среди его братьев и сестер. :nth-of-type(n)
| n-й брат одного и того же типа. :nth-last-of-type(n)
| n-й брат одного и того же типа из последнего. Реверс :nth-of-type
. :empty
| Элемент без каких-либо дочерних элементов.
Пользовательские псевдоязычные пользовательские классы
Псевдо-классы состояния пользовательского интерфейса предлагают способ нацеливания элементов на основе их текущего состояния.
Класс | Описание --------- | ------------ :link
| Непредвиденные элементы ссылок. :visited
| Уже посещенная ссылка. :hover
| Элемент, над которым курсор мыши висит. :active
| Элемент, на который был нажат указатель мыши, но еще не выпущен. :focus
| Элемент, который имеет фокус. Важно для доступности, например, при использовании клавиши tab
для навигации. :enabled
| Элемент, находящийся в разрешенном состоянии. :disabled
| Элемент, который был отключен. :checked
| Выбранный флажок или Радио.
Псевдоэлементы
С другой стороны, псевдоэлементы - это динамически генерируемые элементы или элементы в специальном месте.
Селектор | Описание --------- | ------------ ::first-line
| Первая строка элемента, обычно это контейнер или абзац. ::first-letter
| Буква элемента. Широко используется для укладки капюшона. ::before
| Динамический элемент, созданный с собственным содержимым до фактического элемента. ::after
| Динамический элемент, созданный с собственным содержимым после фактического элемента.
Дополнительная информация:
Дополнительную информацию можно найти в следующих ссылках.