онлайн курсы веб программирования

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  у вас возникли трудности — мы предлагаем пройти обучение с преподавателем онлайн или у нас в офисе на м. Академгородок, м. Житомирская. Желаем удачи на тесте!