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

Онлайн курси веб програмування – швидкий і результативний спосіб навчитися створювати вебресурси. У цьому уроці розглянемо псевдокласи та псевдоелементи в 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`
Internet Explorer	9.0	`:pseudo-element ::pseudo-element`
Firefox (Gecko)	1.0 (1.0)	`:pseudo-element`
Firefox (Gecko)	1.0 (1.5)	`:pseudo-element ::pseudo-element`
Opera	4.0	`:pseudo-element`
Opera	7.0	`:pseudo-element ::pseudo-element`
Safari (WebKit)	1.0 (85)	`:pseudo-element ::pseudo-element`

Якщо при вивченні мови програмування HTML / CSS виникли складнощі – ми пропонуємо пройти навчання з викладачем онлайн або у нас в офісі на м. Академмістечко, м. Житомирська. Бажаємо успіху на тесті!