0:00:00.831,0:00:05.211
Ми знову на сторінці, що містить[br]списки відомих картин.

0:00:05.211,0:00:11.743
CSS починається з правила, яке встановлює[br]шрифт "sans-serif" для усього тексту.

0:00:11.743,0:00:17.114
Далі правило для групових селекторів, яке[br]змінює шрифти заголовків "h1" та "h2".

0:00:17.114,0:00:22.847
І далі є декілька правил, яких ви, напевно,[br]ніколи раніше не бачили

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

0:00:24.737,0:00:29.967
Вони всі починаються з літери "а", потім [br]двокрапка і слово.

0:00:29.967,0:00:35.504
Що означає ця двокрапка?[br]Що ж обирають ці селектори?

0:00:35.504,0:00:41.065
Всі ці речі, що починаються з двокрапки [br]називаються псевдо-класами.

0:00:41.065,0:00:45.002
Псевдо-клас використовують, щоб обрати[br]елементи, які базуються на інформації,

0:00:45.002,0:00:48.002
що не належить до структури сторінки,

0:00:48.002,0:00:51.826
або просто тоді, коли не можна[br]використати інші селектори.

0:00:51.826,0:00:55.470
На цій сторінці я використовую[br]псевдо-класи, щоб оформити посилання

0:00:55.470,0:00:57.430
в залежності від їхнього стану.

0:00:57.430,0:01:03.449
Псевдо-клас "link" обере всі посилання на[br]сторінці, які користувач ще не відвідував

0:01:03.449,0:01:06.582
і які більшість браузерів зафарбовує[br]за замовчуванням у блакитний колір.

0:01:06.582,0:01:10.405
Псевдо-клас "visited" обере усі посилання, які[br]користувач вже відвідав.

0:01:10.405,0:01:13.294
Їх браузер зафарбовує у фіолетовий.

0:01:13.294,0:01:16.121
Якщо ми справді хочемо, ми можемо[br]змінити ці кольори.

0:01:16.121,0:01:18.083
Але для цього у вас має бути [br]поважна причина.

0:01:18.083,0:01:21.404
Люди звикли асоціювати блакитний та[br]фіолетовий кольори зі сторінками,

0:01:21.404,0:01:22.954
які вони бачили або не бачили.

0:01:22.954,0:01:25.549
І також вони люблять знати, які[br]сторінки вони вже відвідували.

0:01:25.549,0:01:28.474
Тому вам не слід змінювати це[br]без поважної причини.

0:01:28.474,0:01:31.092
Зараз я видалю ці два правила,

0:01:31.092,0:01:34.221
тому що, як на мене, змінювати кольори —[br]не дуже добра ідея.

0:01:34.221,0:01:38.972
Наступне правило доволі веселе —[br]"a: hover" (наведення).

0:01:38.972,0:01:46.138
Псевдо-клас "hover" обере елементи,[br]на які користувач наведе мишкою.

0:01:46.138,0:01:48.408
А властивості будуть застосовані[br]лише після цього.

0:01:48.408,0:01:53.353
Зупиніть це відео і наведіть мишкою[br]на посилання, щоб побачити, що трапиться.

0:01:53.353,0:01:57.406
Зробіть це, я почекаю. Hover, hover, [br]hover, hover...

0:01:57.406,0:02:01.165
Чи ви помітили, що змінився колір фону?[br]Це досить класний ефект.

0:02:01.165,0:02:03.685
І ви можете використовувати цей [br]псевдо-клас "hover" для усіх елементів,

0:02:03.685,0:02:05.073
а не лише для посилань.

0:02:05.073,0:02:07.662
Лише пам'ятайте, що цей псевдо-клас[br]працюватиме не на усіх пристроях.

0:02:07.662,0:02:10.262
Наприклад, якщо ви використовуєте телефон,[br]ви не можете навести мишкою,

0:02:10.262,0:02:11.421
ви зможете лише торкнутись [br]або не торкнутись.

0:02:11.421,0:02:15.298
Добре мати цей ефект як бонус,[br]але не дуже покладайтеся на нього.

0:02:15.298,0:02:20.503
Що означають останні два правила?[br]Вони такі самі, як і "hover".

0:02:20.503,0:02:23.043
Вони залежать від того, що саме[br]робить користувач.

0:02:23.067,0:02:26.721
Псевдо-клас "active" (активний)[br]обирає елементи, які були активовані.

0:02:26.721,0:02:31.571
Наприклад, посилання, на яке натискає[br]користувач одразу перед тим,

0:02:31.571,0:02:34.076
як змінюється сторінка.

0:02:34.076,0:02:38.274
Псевдо-клас "focus" (орієнтованість) [br]обирає елементи, які мають орієнтацію,

0:02:38.274,0:02:41.064
переважно тоді, коли ви використовуєте[br]клавішу табуляції, щоб перейти

0:02:41.064,0:02:42.944
до певної частини сторінки.

0:02:42.944,0:02:45.214
Зупиніть зараз це відео і спробуйте[br]перейти до посилання за допомогою

0:02:45.214,0:02:47.744
клавіші "tab" і просто натиснути на нього,[br]щоб побачити, що трапиться.

0:02:47.744,0:02:51.497
Чи ви побачили, що змінився колір[br]фону, коли ви це зробили?

0:02:51.497,0:02:54.635
Я вибрала однакові властивості для[br]псевдо-класів "hover", "active" та "focus",

0:02:54.635,0:02:56.415
тому що вони всі належать до одного[br]виду речей.

0:02:56.415,0:02:58.842
Користувач певним чином взаємодіє[br]з посиланням.

0:02:58.842,0:03:01.865
Багато веб-розробників використовують[br]однакові властивості для всіх трьох станів

0:03:01.865,0:03:03.655
саме з цієї причини.

0:03:03.655,0:03:07.114
А що як я вирішу змінити колір фону?

0:03:07.114,0:03:13.552
Що ж, я можу змінити кожне посилання[br]окремо

0:03:13.552,0:03:15.885
або зробити те, що ми щойно[br]вивчили.

0:03:15.885,0:03:20.140
Я можу згрупувати селектори, поставивши[br]їх в одне правило, розділивши комами.

0:03:20.140,0:03:27.214
Тому ми поставимо кому після цього[br]і напишемо "a:active" і "a:focus".

0:03:27.214,0:03:37.418
Тепер я можу видалити ці два правила[br]і замінити всі три правила одним. Чудово.

0:03:37.418,0:03:41.531
Ми вам показали лише декілька [br]псевдо-класів, насправді їх є значно більше.

0:03:41.531,0:03:45.123
Ви можете пошукати псевдо-класи CSS [br]в Інтернеті, щоб вивчити декілька нових,

0:03:45.123,0:03:48.603
або почекати, поки ми вивчимо більше тут.

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