Css что такое gcf

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

Ко всем этим селекторам могут прикрепляться псевдоклассы. Псевдокласс:

• определяет конкретное состояние элемента;
• это ключевое слово, которое начинается с двоеточия.

Синтаксис

Псевдокласс не может существовать сам по себе. Он должен быть прикреплён к селектору. Псевдокласс будет определять только определённое состояние этого селектора.

Синтаксис выглядит следующим образом:

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

:hover

К примеру, типовым используемым псевдоклассом является :hover , который будет применять стиль, когда на целевой элемент наводится указатель мыши. Давайте проверим это на ссылках.

Наведите курсор на эту ссылку и увидите, как она становится красной.

Вторая строка ориентирована на те же элементы HTML, но только, когда происходит что-то конкретное (в данном случае, наведение).

:visited

Этот псевдокласс нацеливается на ссылки, которые уже были посещены. По умолчанию ссылки отображаются синими и при посещении становятся фиолетовыми. Результаты Google работают так же.

Google Twitter Facebook Mozilla MarkSheet

Менять цвет посещённых ссылок часто забывают, но пользователям так удобнее просматривать список результатов. Это помогает им легко определять, где они уже были.

:focus

Данный псевдокласс происходит, когда элемент HTML получает фокус. Это особенно полезно для полей форм.

Правило outline: none удаляет свечение вокруг поля.

:first-child и :last-child

Эти псевдоклассы связаны с иерархией в HTML. Они нацеливаются на элементы HTML в зависимости от порядка, в котором они появляются в коде.

Если бы нам понадобилось добавить пятый пункт списка, то применяя тот же CSS, стилизация автоматически изменится.

:nth-child

Данный псевдокласс является глобальной версией :first-child и :last-child . С помощью :nth-child вы можете вычислить конкретный дочерний целевой элемент.

К примеру, если вы хотите нацелиться на второй дочерний элемент, то используйте :nth-child(2) .

odd и even

Кроме использования чисел, :nth-child поставляется с двумя ключевыми словами:

• :nth-child(odd) нацелится на каждый нечётный элемент;
• :nth-child(even) нацелится на каждый чётный элемент.

Счётчик n

Мощным аспектом :nth-child является то, что он может нацелиться на элементы, основываясь на расчётах с помощью ключевого слова n .

Значение n повышается от 0 до количества представленных дочерних элементов.

Что делать, если вы хотите нацелиться на каждый третий элемент?

В нашем случае n начинается с нуля и заканчивается шестью.

Компьютеры начинают отсчёт с нуля. И поскольку в нашем списке семь элементов, мы будем считать до шести, потому что 0-1-2-3-4-5-6 представляют семь пунктов.

Вы можете прочитать :nth-child(3n) как «нацелиться на каждый элемент, положение которого делится на 3». В нашем случае, это третий и шестой пункт списка:

• 3 умножить на 0 равен нулю;
• 3 умножить на 1 — третий пункт;
• 3 умножить на 2 — шестой пункт.

n + 1

Что делать, если вы хотите нацелиться на первый пункт и каждый третий пункт после него?

3n + 1 состоит из двух частей:

• 3n выбирает каждый третий пункт;
• +1 смещает начало на 1.

Вот как были выполнены вычисления:

• 3 умножить на 0 плюс 1 равно 1;
• 3 умножить на 1 плюс 1 равно 4;
• 3 умножить на 2 плюс 1 равно 7.

Счётчик n является очень гибким. Если вычисления делать сложно, то просто протестируйте, чтобы получить правильную выборку.

Другие псевдоклассы

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

Источник

Псевдоклассы

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

div:hover  background-color: #F89B4D; > 

Псевдоклассы дают возможность стилизовать элемент на основе не только отношений в DOM-дереве, но и основываясь на внешних факторах, таких как история посещений (например, :visited ), состояние содержимого (вроде :checked у некоторых элементов формы) или позиции курсора мыши (например, :hover определяет, находится ли курсор мыши над элементом).

Примечание: В отличие от псевдоклассов, псевдоэлементы могут быть использованы для стилизации определённой части элемента.

Синтаксис

Как и с обычными классами, можно совмещать вместе в одном селекторе любое число псевдоклассов.

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

Спецификации

Спецификация	Статус	Комментарий
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?

This page was last modified on 10 окт. 2022 г. by MDN contributors.

Your blueprint for a better internet.

Источник