Как сделать псевдоклассы в css
Псевдоклассы — особый вид селектора, который уточняет тип или состояние. Обычно это какой-то качественный признак: реакция на наведение курсора, порядок следования и другие.
Пример
Рассмотрим 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(. )) неверна.
Читайте также: