IT-школа
12. Hover / after / befor / active
Онлайн курсы веб программирования — быстрый и результативный способ научиться создавать веб-ресурсы. В этом уроке рассмотрим псевдоклассы и псевдоэлементы в CSS. После прохождения урока вы можете проверить свои знания пройдя тест. Сертификат о прохождении которого можно обменять на коины. Коины это валюта школы GoMother, за которые можно приобрести канцелярию и другие подарки.
Онлайн курсы веб программирования
Псевдокласс в CSS — это ключевое слово, добавленное к селектору, оно определяет его особое состояние. Например, :hover может быть использован для изменения цвета кнопки при наведении курсора на неё.
div:hover {
background-color: #F89B4D;
}Псевдоклассы дают возможность стилизовать элемент на основе не только отношений в DOM-дереве, но и основываясь на внешних факторах, таких как история посещений (например, :visited), состояние содержимого (вроде:checked у некоторых элементов формы) или позиции курсора мыши (например, :hover определяет, находится ли курсор мыши над элементом).
Обратите внимание: В отличие от псевдоклассов, псевдоэлементы могут быть использованы для стилизации определённой части элемента.
Синтаксис
selector:pseudo-class { property: value; }
Как и с обычными классами, можно совмещать вместе в одном селекторе любое число псевдоклассов.
Список стандартных псевдоклассов:
:active; :any (en-US); :any-link; :checked; :default; :defined; :dir(); :disabled; :empty; :enabled; :first; :first-child; :first-of-type; :fullscreen; :focus; :hover; :indeterminate; :in-range; :invalid; :lang(); :last-child; :last-of-type; :left; :link; :not(); :nth-child(); :nth-last-child(); :nth-last-of-type(); :nth-of-type(); :only-child; :only-of-type; :optional; :out-of-range; :read-only; :read-write; :required; :right; :root;:scope (en-US);:target; :valid; :visited .
Спецификации. Онлайн курсы веб программирования
| Спецификация | Статус | Комментарий |
|---|---|---|
| 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, но без связанного семантического значения. |
Псевдоэлемент в CSS — это ключевое слово, добавляемое к селектору, которое позволяет стилизовать определённую часть необходимого элемента. Например, псевдоэлемент ::first-line может быть использован для изменения шрифта первой строки абзаца.
/* Первая строка каждого элемента <p>. */ p::first-line { color: blue; text-transform: uppercase; }Copy to Clipboard
Обратите внимание: В отличие от псевдоэлементов, псевдоклассы могут быть использованы для стилизации элемента на основе его состояния.
Синтаксис
selector::pseudo-element {
property: value;
}
В селекторе можно использовать только один псевдоэлемент. Который должен находиться после простых селекторов в выражении.
Как правило, следует использовать двойное двоеточие (::) вместо одинарного (:). В этом состоит различие между псевдоклассами и псевдоэлементами. Но, так как это различие не присутствовало в старых версиях спецификации W3C, большинство браузеров поддерживают оба синтаксиса для псевдоэлементов.
Список стандартных псевдоэлементов:
- ::after
- ::before
- ::cue
- ::first-letter
- ::first-line
- ::selection
- ::slotted
- ::backdrop
- ::placeholder
- ::marker
- ::spelling-error (en-US)
- ::grammar-error
| Браузер | Начиная с версии | Поддерживает |
| Internet Explorer | 8.0 | :pseudo-element |
| 9.0 | :pseudo-element ::pseudo-element | |
| Firefox (Gecko) | 1.0 (1.0) | :pseudo-element |
| 1.0 (1.5) | :pseudo-element ::pseudo-element | |
| Opera | 4.0 | :pseudo-element |
| 7.0 | :pseudo-element ::pseudo-element | |
| Safari (WebKit) | 1.0 (85) | :pseudo-element ::pseudo-element |
Если при изучении языка программирования HTML/CSS у вас возникли трудности — мы предлагаем пройти обучение с преподавателем онлайн или у нас в офисе на м. Академгородок, м. Житомирская. Желаем удачи на тесте!