Динамічні псевдо-класи CSS

Ми знову на сторінці, що містить
списки відомих картин.

CSS починається з правила, яке встановлює
шрифт "sans-serif" для усього тексту.

Далі правило для групових селекторів, яке
змінює шрифти заголовків "h1" та "h2".

І далі є декілька правил, яких ви, напевно,
ніколи раніше не бачили

і які, мабуть, виглядають трохи смішно.

Вони всі починаються з літери "а", потім
двокрапка і слово.

Що означає ця двокрапка?
Що ж обирають ці селектори?

Всі ці речі, що починаються з двокрапки
називаються псевдо-класами.

Псевдо-клас використовують, щоб обрати
елементи, які базуються на інформації,

що не належить до структури сторінки,

або просто тоді, коли не можна
використати інші селектори.

На цій сторінці я використовую
псевдо-класи, щоб оформити посилання

в залежності від їхнього стану.

Псевдо-клас "link" обере всі посилання на
сторінці, які користувач ще не відвідував

і які більшість браузерів зафарбовує
за замовчуванням у блакитний колір.

Псевдо-клас "visited" обере усі посилання, які
користувач вже відвідав.

Їх браузер зафарбовує у фіолетовий.

Якщо ми справді хочемо, ми можемо
змінити ці кольори.

Але для цього у вас має бути
поважна причина.

Люди звикли асоціювати блакитний та
фіолетовий кольори зі сторінками,

які вони бачили або не бачили.

І також вони люблять знати, які
сторінки вони вже відвідували.

Тому вам не слід змінювати це
без поважної причини.

Зараз я видалю ці два правила,

тому що, як на мене, змінювати кольори —
не дуже добра ідея.

Наступне правило доволі веселе —
"a: hover" (наведення).

Псевдо-клас "hover" обере елементи,
на які користувач наведе мишкою.

А властивості будуть застосовані
лише після цього.

Зупиніть це відео і наведіть мишкою
на посилання, щоб побачити, що трапиться.

Зробіть це, я почекаю. Hover, hover,
hover, hover...

Чи ви помітили, що змінився колір фону?
Це досить класний ефект.

І ви можете використовувати цей
псевдо-клас "hover" для усіх елементів,

а не лише для посилань.

Лише пам'ятайте, що цей псевдо-клас
працюватиме не на усіх пристроях.

Наприклад, якщо ви використовуєте телефон,
ви не можете навести мишкою,

ви зможете лише торкнутись
або не торкнутись.

Добре мати цей ефект як бонус,
але не дуже покладайтеся на нього.

Що означають останні два правила?
Вони такі самі, як і "hover".

Вони залежать від того, що саме
робить користувач.

Псевдо-клас "active" (активний)
обирає елементи, які були активовані.

Наприклад, посилання, на яке натискає
користувач одразу перед тим,

як змінюється сторінка.

Псевдо-клас "focus" (орієнтованість)
обирає елементи, які мають орієнтацію,

переважно тоді, коли ви використовуєте
клавішу табуляції, щоб перейти

до певної частини сторінки.

Зупиніть зараз це відео і спробуйте
перейти до посилання за допомогою

клавіші "tab" і просто натиснути на нього,
щоб побачити, що трапиться.

Чи ви побачили, що змінився колір
фону, коли ви це зробили?

Я вибрала однакові властивості для
псевдо-класів "hover", "active" та "focus",

тому що вони всі належать до одного
виду речей.

Користувач певним чином взаємодіє
з посиланням.

Багато веб-розробників використовують
однакові властивості для всіх трьох станів

саме з цієї причини.

А що як я вирішу змінити колір фону?

Що ж, я можу змінити кожне посилання
окремо

або зробити те, що ми щойно
вивчили.

Я можу згрупувати селектори, поставивши
їх в одне правило, розділивши комами.

Тому ми поставимо кому після цього
і напишемо "a:active" і "a:focus".

Тепер я можу видалити ці два правила
і замінити всі три правила одним. Чудово.

Ми вам показали лише декілька
псевдо-класів, насправді їх є значно більше.

Ви можете пошукати псевдо-класи CSS
в Інтернеті, щоб вивчити декілька нових,

або почекати, поки ми вивчимо більше тут.

Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.org"