Как сделать псевдоклассы в css

Обновлено: 08.07.2024

Псевдоклассы — особый вид селектора, который уточняет тип или состояние. Обычно это какой-то качественный признак: реакция на наведение курсора, порядок следования и другие.

Пример

Рассмотрим CSS для подсветки строки таблицы при наведении курсора.

В обычном состоянии цвет фона — тёмный:

При наведении курсора цвет фона изменится на голубой:

Как это понять

Благодаря псевдоклассам мы можем контролировать динамические параметры селекторов. Эти свойства сработают, когда селектор подходит под дополнительный признак.

Как пишется

Селектор может и отсутствовать. Тогда правило применится ко всем элементам, которые могут иметь признак этого псевдокласса. Например, CSS-правило :focus <> применится к любому элементу, который будет в фокусе.

:active

Применяется к интерактивным элементам в момент взаимодействия. Например, нажатая кнопка.

Позволяет сгруппировать схожие селекторы вместо последовательного перечисления через запятую. При группировке большого количества селекторов это может существенно сократить, а главное — упростить написание.

с :is() это можно описать так:

:any-link , :link , :visited

:checked

Применяется к элементам, состояние которых меняется с помощью атрибута checked .

:default

Применяется к элементам формы ( , , и ), у которых можно задать начальное состояние.

Например, у селектор применится к тому чекбоксу, у которого в разметке установлен атрибут checked , т. е. он по умолчанию выбран:

Позволяет найти элементы по направлению текста в нём (например, в арабском направление письма идёт справа налево). К сожалению, пока свойство поддерживается только в Firefox.

:disabled , :enabled

Позволяют находить элементы формы по состоянию их атрибута disabled . Почти эквивалентны селекторам по атрибуту ( [disabled] и :not([disabled]) соответственно), но более гибкие, т. к. среагируют на унаследованное состояние disabled . Если есть , то отключаются вложенные в него контролы форм.

:empty

Применяется к элементам, у которых внутри нет других тегов или текста. Например, можно проверить, что у кнопки не задан текст или иконка, чтобы задать минимальные размеры:

Псевдоклассы группы child

Селекторы элемента по его положению относительно родителя (первый, последний, n-й, единственный).

Псевдоклассы группы type

Селектор по типу внутри одного родителя.

:fullscreen

Признак того, что документ развернули на всё окно (с помощью JavaScript).

Скроем панель управления у плеера, если он развёрнут на весь экран:

:focus и :focus-within

Элемент, который сейчас находится в фокусе. А :focus-within ещё обозначает элемент, внутри которого находится элемент в фокусе.

Позволяет выбрать элемент, уточнив основной селектор дополнительным, при этом не увеличив его вес. В отличие от привычных селекторов, правило применится только к тому селектору, который был описан до :has() . В январе 2021 года нет поддержки ни в одном браузере.

:hover

Состояние элемента, когда на него навели курсор.

:indeterminate

Элементы, которые могут находиться в промежуточном состоянии:

  • , отображающий, что не все пункты вложенной группы были выделены.
  • Группа с одинаковым name , но у которой ни один элемент не установлен в checked .

Для состояние indeterminate в HTML можно задать только через JavaScript.

:in-range и :out-of-range

Применяется для , у которого определены атрибуты min и max и введённое значение соответствует ( :in-range ) или нет ( :out-of-range ) этому диапазону.

Селектор по языку содержимого. В HTML есть атрибут lang , который указывает на язык содержимого. Псевдокласс lang() позволяет обратиться к элементу, чьё значение атрибута lang подходит под условие.

Например, в арабском языке нет переносов:

Находит элемент, который не соответствует селектору, переданному в качестве аргумента. Очень мощный псевдокласс, позволяющий писать эффективные CSS-селекторы.

Выделим красной рамкой все , которым забыли прописать атрибут alt :

:optional и :required

:optional находит любой , у которого не установлен атрибут required — то есть находит необязательные поля ввода. А :required — наоборот, те , у которых есть этот атрибут.

:read-only и :read-write

Находит элементы, недоступные ( :read-only ) или наоборот ( :read-write ) для редактирования. Например, ориентируется на наличие атрибута disabled или readonly .

Соответствует корневому тегу-элементу документа. Для HTML это, соответственно, , для SVG — . Специфичность селектора :root выше, чем у селектора по тегу.

:target

Предыдущие статьи этого учебника преимущественно были посвящены применению CSS стилей непосредственно к HTML элементам через использование различных селекторов, таких как селектор типа, селектор класса, id селектора и селектора потомков.

Современный стандарт каскадных таблиц стилей позволяет форматировать не только элементы к которым можно явно обратиться, но и предоставляет возможность стилизовать такие части документа, которые явно не определены в дереве документа, либо стилизовать их в зависимости от внешних факторов. Например, изменение первой строки абзаца, или изменение вида ссылки, на которую в настоящий момент наведен указатель мыши, история навигации в документе, а так же размещение сгенерированного текстового содержимого после или до определенного элемента.

В этой статье учебника пойдет речь о специальных псевдоклассах и псевдоэлементах, которые дают возможность затронуть форматирование на странице такие особенности элементов, которые явным образом не указать.

Псевдоэлементы

Псевдоэлементы ::first-letter и ::first-line

В современном стандарте CSS 3 используются 5 (пять) основных псевдоэлементов, которые добавляются к селекторам и имеют следующий синтаксис:

Обратите внимание, что в настоящее время используется синтаксис, который предусматривает двойное двоеточие перед псевдоэлементом. Не смотря на то, что браузеры поддерживают оба варианта, рекомендуется использовать синтаксис CSS 3.

Первыми псевдоэлементами, которые мы рассмотрим будут ::first-letter и ::first-line. Псевдоэлемент ::first-letter позволяет создавать инициал (буквицу) — начальный символ текстового блока. Такой метод часто можно встретить в печатных изданиях, например, в сказках.

Псевдоэлемент ::first-line позволяет стилизовать первую строку абзаца, которая будет отличаться от основного текста. Данный псевдоэлемент дает более широкие возможности для оформления текста.

Псевдо-класс используется для определения специального состояния элемента.

Например, он может быть использован для:

  • Стиль элемента, когда пользователь наносит на него указатель мыши
  • Стиль посещенных и непосещенных ссылки по-разному
  • Стиль элемента, когда он получает фокус

Синтаксис

Псевдо-классы привязки

Ссылки могут отображаться различными способами:

Пример

Примечание: a:hover Должны прийти после a:link и a:visited в CSS определение для того, чтобы быть эффективным! a:active Должны прийти после a:hover в CSS определение для того, чтобы быть эффективным! Имена псевдо-классов не чувствительны к регистру.

Псевдо-классы и классы CSS

Псевдо-классы могут сочетаться с классами CSS:

При наведении указателя мыши на ссылку в примере она изменит цвет:

Пример

Наведите курсор на

Пример использования псевдо-класса :hover в элементе

Пример

Простая подсказка Hover

Наведите указатель мыши на элемент

(например, всплывающая подсказка):

Пример

p <
display: none;
background-color: yellow;
padding: 20px;
>

div:hover p display: block;
>

CSS-: первый-ребенок псевдо-класс

Псевдо-класс :first-child соответствует указанному элементу, который является первым дочерним элементом другого элемента.

Соответствие первому элементу

В следующем примере селектор соответствует любому элементу

, который является первым дочерним элементом любого элемента:

Пример

Сопоставление первого элемента во всех

В следующем примере селектор соответствует первому элементу во всех элементах

Пример

Сопоставить все элементы во всех первых дочерних элементах

В следующем примере селектор соответствует всем элементам в

элементы, являющиеся первыми дочерними элементами другого элемента:

Пример

CSS-The: lang псевдо-класс

:lang псевдо-класс позволяет определить специальные правила для разных языков.

В приведенном ниже примере :lang определяет кавычки для элементов с lang = "No":

Концепция псевдоклассов была введена, чтобы разрешить выбор на основе информации, которая лежит вне дерева документа или не может быть выражена с помощью простых тегов. Псевдоклассы могут быть динамическими, в том смысле, что элемент получает или теряет псевдокласс при определенных действиях пользователя.

Динамические псевдоклассы CSS

:link определяет стилевое оформление ссылок, которые еще не посещались пользователем.

Исключением являются метки, на них действие :link не распространяется:

:visited определяет стилевое оформление ссылок, посещенных пользователем.

Через какое-то количество времени браузер может вернуть ссылке статус непосещенной (:link).

:hover применяется, если пользователь наводит на элемент указатель мыши.

Псевдокласс :hover может быть применен не только к ссылкам. При наведении указателя мыши можно подсветить строку таблицы.

Пример
:active применяется, если элемент активирован пользователем. Например, пользователь нажимает левую кнопку мыши на ссылку.
:focus применяется, если элемент получает фокус. Например, для текстового поля формы получение фокуса означает, что курсор установлен в поле:

Целевой псевдокласс :target

Это значит, что ссылка ведет не на начало документа, а на элемент с указанным идентификатором (атрибутом id). Такой элемент и есть целевой элемент.

Псевдокласс языка :lang

:lang представляет элемент, написанный на указанном языке.

С помощью псевдокласса :lang можно задавать настройки, характерные для разных языков, например, тип кавычек.

Двухсимвольные обозначения некоторых языков
de Немецкий
en Английский
fr Французский
ru Русский
Пример
  • Цитата на немецком языке: In Hoffnung schweben, macht süß das Leben .
  • Цитата на английском языке: То be or not to be .
  • Цитата на французском языке: Dans chaque malheur – cherchez la femme .

Псевдоклассы состояний

По умолчанию (если нет атрибута disabled) все элементы форм доступны.

Пример

Какой напиток Вы предпочитаете пить по утрам?

:indeterminate определяет неопределенные флажки (checkbox) и переключатели (radio).

Неопределенное состояния для флажков является чисто визуальным эффектом и маскирует истинное состояние (включен или выключен). Установить в HTML-коде неопределенное состояние нельзя, т.к. нет специального атрибута. Это можно сделать только в JavaScript. Пример

Структурные псевдоклассы

Структурные псевдоклассы позволяют выбрать элемент на основе дополнительной информации, которая лежит в дереве документа, но не может быть представлена простыми селекторами.


:root определяет корневой элемент документа.

Для HTML-документа корневым является элемент. Поэтому следующие записи идентичны:

Но CSS применяются не только к HTML-документам, но и к XML-страницам, а также к SVG-файлам. Использование псевдокласса :root дает более универсальную форму записи для доступа к корневому элементу страницы. Это особенно важно при непрерывном развитии web-технологий и постоянном появлении новых мобильных устройств.


:nth-child(номер) определяет элемент по его номеру в дереве элементов.

Значения номера

число Дочерний элемент с заданным номером. an+b Дочерний элемент с номером an+b, где a и b заданные числа, n – счетчик, который автоматически принимает значение 0, 1, 2. even Все чётные элементы. odd Все нечётные элементы.

Пример

:nth-last-child(номер) определяет элемент по его номеру в дереве элементов, считая с конца.
Пример

:nth-of-type(номер) определяет дочерний элемент указанного типа по его номеру в дереве элементов.
Пример

:nth-last-of-type(номер) определяет дочерний элемент указанного типа по его номеру в дереве элементов, считая с конца.
Пример

:first-child определяет первый дочерний элемент родителя.
Пример

:last-child определяет последний дочерний элемент родителя.
Пример

:first-of-type определяет первый дочерний элемент указанного типа в дереве элементов.
Пример

:last-of-type определяет последний дочерний элемент указанного типа в дереве элементов.
Пример

:only-child определяет дочерний элемент, если он у родителя единственный. Пример
:only-of-type определяет дочерний элемент указанного типа, если он у родителя единственный. Пример
:empty определяет пустой элемент, т.е. элемент который не содержат ни дочерних элементов, ни текста, ни пробелов. Пример

Псевдокласс отрицания :not

:not(X) определяет элемент, который не содержит указанный селектор X. Пример

В качестве аргумента X могут быть указаны теги, идентификаторы, классы, псевдоклассы и селекторы атрибутов. В качестве аргумента X нельзя использовать псевдоэлементы и псевдокласс :not, т.е. отрицание не может быть вложенным и запись :not(:not(. )) неверна.

Читайте также: