CSS Псевдоклассы
Псевдоклассы CSS используются для добавления специальных эффектов к некоторым селекторам.
Синтаксис
Синтаксис псевдоклассов
CSS-классы также могут использовать псевдоклассы:
Псевдоклассы ссылок
В браузерах, поддерживающих CSS, разные состояния ссылок могут отображаться по-разному.
Пример
Попробуйте сами »
Примечание:В определениях CSS a:hover должен располагаться после a:link и a:visited, чтобы быть допустимым.
Примечание:В определениях CSS a:active должен располагаться после a:hover, чтобы быть допустимым.
Примечание:Имена псевдоклассов нечувствительны к регистру.
Псевдоклассы и CSS-классы
Псевдоклассы можно использовать вместе с CSS-классами:
Если ссылка в приведенном выше примере была посещена, она будет отображаться красным.
Псевдокласс CSS :first-child
Вы можете использовать псевдокласс :first-child, чтобы выбрать первый дочерний элемент родительского элемента.
Примечание:Необходимо объявить в версиях до IE8<!DOCTYPE>, чтобы :first-child вступил в силу.
Соответствует первому элементу <p>
В следующем примере селектор соответствует элементам <p>, которые являются первым дочерним элементом любого элемента:
Соответствует первому элементу <i> во всех элементах <p>.
В следующем примере селектор выбирает первый элемент <i> среди всех элементов <p>:
Соответствует всем элементам <i> в элементах <p>, которые являются первыми дочерними элементами.
В следующем примере селектор выбирает все элементы <i> в элементах <p>, которые являются первыми дочерними элементами какого-либо элемента:
CSS — псевдокласс :lang
Псевдокласс :lang даёт возможность определять специальные правила для разных языков.
Примечание:IE8 должен объявить<!DOCTYPE>для поддержки псевдокласса :lang.
В следующем примере класс :lang определяет тип кавычек для элементов q со значением атрибута no:
Другие примеры
Добавление разных стилей к гиперссылкам
Этот пример демонстрирует, как добавить другие стили к гиперссылкам.
Использование :focus
Этот пример демонстрирует, как использовать псевдокласс :focus.
Все псевдоклассы/элементы CSS
| Селектор | Пример | Описание примера |
|---|---|---|
| :checked | input:checked | Выбирает все выбранные элементы формы |
| :disabled | input:disabled | Выбирает все отключенные элементы формы |
| :empty | p:empty | Выбирает все элементы <p> без дочерних элементов |
| :enabled | input:enabled | Выбирает все включённые элементы формы |
| :first-of-type | p:first-of-type | Выбирает каждый элемент p, который является первым элементом p внутри своего родительского элемента. |
| :in-range | input:in-range | Выбирает значения в пределах указанного диапазона элементов |
| :invalid | input:invalid | Выбирает все недействительные элементы |
| :last-child | p:last-child | Выбирает последний дочерний элемент всех элементов p. |
| :last-of-type | p:last-of-type | Выбирает каждый элемент p, который является последним элементом p своего родительского элемента. |
| :not(selector) | :not(p) | Выбирает все элементы, кроме <p> |
| :nth-child(n) | p:nth-child(2) | Выбирает второй дочерний элемент родительского элемента всех элементов p. |
| :nth-last-child(n) | p:nth-last-child(2) | Выбирает предпоследний дочерний элемент всех элементов p. |
| :nth-last-of-type(n) | p:nth-last-of-type(2) | Выбирает предпоследний дочерний элемент p всех элементов p. |
| :nth-of-type(n) | p:nth-of-type(2) | Выбирает второй дочерний элемент p всех элементов p. |
| :only-of-type | p:only-of-type | Выбирает все элементы, у которых есть только один дочерний элемент, являющийся элементом p. |
| :only-child | p:only-child | Выбирает все элементы p, имеющие только один дочерний элемент. |
| :optional | input:optional | Выбирает атрибуты элемента без "required". |
| :out-of-range | input:out-of-range | Выбирает атрибуты элемента, значение которых выходит за пределы указанного диапазона. |
| :read-only | input:read-only | Выбирает элементы с атрибутом «только для чтения» |
| :read-write | input:read-write | Выбирает элементы без атрибута только для чтения |
| :required | input:required | Выбирает атрибуты элементов, у которых указан атрибут "required". |
| :root | root | Выбирает корневой элемент документа |
| :target | #news:target | Выбирает текущий активный элемент #news (когда URL, по которому щёлкнули, содержит имя якоря). |
| :valid | input:valid | Выбирает все атрибуты с допустимыми значениями |
| :link | a:link | Выбирает все непосещённые ссылки |
| :visited | a:visited | Выбирает все посещённые ссылки |
| :active | a:active | Выбирает активную ссылку |
| :hover | a:hover | Состояние, когда курсор мыши наведён на ссылку |
| :focus | input:focus | Выбирает элементы, которые получают фокус после ввода |
| :first-letter | p:first-letter | Выбирает первую букву каждого элемента <p>. |
| :first-line | p:first-line | Выбирает первую строку каждого элемента <p> |
| :first-child | p:first-child | Селектор соответствует элементам <p>, которые являются первым дочерним элементом любого элемента. |
| :before | p:before | Вставляет содержимое перед каждым элементом <p> |
| :after | p:after | Вставляет содержимое после каждого элемента <p> |
| :lang(язык) | p:lang(it) | Выбирает начальное значение для атрибута lang элементов <p>. |