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

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; }

Зверніть увагу: На відміну від псевдоелементів, псевдокласи можуть бути використані для стилізації елемента на основі його стану.

Синтаксис

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 виникли складнощі – ми пропонуємо пройти навчання з викладачем онлайн або у нас в офісі на м. Академмістечко, м. Житомирська. Бажаємо успіху на тесті!