0:00:00.809,0:00:05.432
Перейдімо від пончиків до моркви, одного[br]з найкорисніших продуктів у світі,

0:00:05.432,0:00:07.901
а також найулюбленішої їжі кроликів.

0:00:07.901,0:00:10.534
Чи знаєте ви, що морква буває не[br]лише помаранчевою?

0:00:10.534,0:00:13.535
Спочатку вона була фіолетовою. І деяка[br]морква досі є такою.

0:00:13.535,0:00:16.541
Ми тут маємо коротку сторінку, що містить[br]список кольорів моркви

0:00:16.541,0:00:19.541
і речення про те, що перша морква була[br]фіолетовою.

0:00:19.541,0:00:25.267
Ми використали стилі, щоб зафарбувати [br]назви кольорів у відповідний колір.

0:00:25.267,0:00:28.905
Мені подобається, як стилі виглядають зі[br]списком, але я не впевнена, що мені

0:00:28.905,0:00:31.905
подобається, як стиль "purple" (фіолетовий)[br]виглядає в тексті.

0:00:31.905,0:00:35.035
Я думаю, мені краще не використовувати там[br]колір фону, а вибрати якесь менш нав'язливе

0:00:35.035,0:00:36.215
кольорове оформлення.

0:00:36.215,0:00:43.778
Як я можу сказати браузеру оформити[br]фіолетовий текст там по-іншому, ніж тут?

0:00:43.778,0:00:47.780
Що ж, вони мають однаковий клас, тому ми[br]не можемо використати ім'я класу,

0:00:47.780,0:00:49.300
доки не створимо новий клас.

0:00:49.300,0:00:52.919
Вони також мають однакову назву тега —[br].

0:00:52.919,0:00:58.013
Тому ми не можемо використати селектор [br]елемент-плюс-клас, який ми щойно вивчили.

0:00:58.013,0:01:00.663
Є ще щось, що їх відрізняє?

0:01:00.663,0:01:06.376
Єдина відмінність — це те, що цей тег[br] знаходиться всередині тега ,

0:01:06.376,0:01:10.985
в той час як цей тег  —[br]всередині тега .

0:01:10.985,0:01:15.583
Тобто є відмінність в батьківських тегах —[br]тегах, які є над ними.

0:01:15.583,0:01:21.142
За допомогою цієї інформації, ми можемо[br]створити правило CSS, використавши

0:01:21.142,0:01:25.216
"селектор нащадка" — спосіб вибрати елемент[br]залежно від його розташування в документі.[br]

0:01:25.216,0:01:30.624
Наприклад, щоб вибрати фіолетовий тег[br] всередині абзацу,[br]

0:01:30.624,0:01:35.776
ми напишемо "р", пробіл (він є дуже[br]важливим!)

0:01:35.776,0:01:40.381
і потім ім'я класу — ".purple". [br]

0:01:40.381,0:01:46.112
Тепер ми додамо властивості, які [br]будуть менш помітними —

0:01:46.112,0:01:50.311
колір фону "transparent" змінить те, [br]що було раніше.

0:01:50.311,0:01:58.802
Чудово. Ми змінили цей фіолетовий текст,[br]не змінивши цей.

0:01:58.802,0:02:02.879
І тепер щоразу, коли ми матимемо клас[br]" purple" всередині параграфа, як тут,[br]

0:02:02.879,0:02:05.324
застосовуватиметься саме цей новий стиль.

0:02:05.324,0:02:09.588
Ми можемо використовувати пробіл, щоб[br]пробратись ще глибше в наш документ.[br]

0:02:09.588,0:02:15.728
Скажімо, ми хочемо застосувати стиль лише[br]до тих тегів , які є в тегах .

0:02:15.728,0:02:23.143
Ми починаємо з батьківського тега ,[br]потім ставимо пробіл та .

0:02:23.143,0:02:28.066
І, можливо, ми дамо їм іншу висоту рядка,[br]щоб розділити їх ще більше.

0:02:28.066,0:02:34.073
Чудово. Ми можемо навіть додати [br]перед , якщо ми хочемо впевнетись,

0:02:34.073,0:02:38.525
що це правило не буде застосоване до тегів[br] в тегах  та .

0:02:38.525,0:02:43.247
Бачите, для того щоб використовувати[br]селектор нащадка, ми маємо добре знати

0:02:43.247,0:02:46.102
структуру документа і які теги є [br]всередині інших.

0:02:46.102,0:02:49.512
Якщо ви робите правильні відступи,[br]це буде просто,

0:02:49.512,0:02:52.508
тому що ваші відступи відображатимуть[br]ієрархію тегів.

0:02:52.508,0:02:56.955
Бачите, ось тут є тег , далі в ньому[br]є тег ,

0:02:56.955,0:02:59.341
а всередині тега  є тег .

0:02:59.341,0:03:02.926
Якщо ж ви не використовуєте[br]відступів, краще виправте це зараз,

0:03:02.926,0:03:07.024
бо це значно полегшить ваше розуміння[br]структури сторінки

0:03:07.024,0:03:10.609
та селекторів CSS, які базуються на цій [br]структурі.

0:03:10.609,0:03:13.598
Ви можете використовувати пробіл [br]між будь-якими селекторами.

0:03:13.598,0:03:19.021
Наприклад, дістатись до певного тега за[br]елементом з конкретним ID

0:03:19.021,0:03:22.463
чи дістатись до елемента з ID, вказавши[br]перед тим назву класу,

0:03:22.463,0:03:25.333
ви можете використовувати [br]будь-які поєднання.

0:03:25.333,0:03:29.230
Єдине, що ви маєте пам'ятати — це те, що[br]коли структура вашої сторінки зміниться,

0:03:29.230,0:03:32.230
ваше старе правило CSS вже не діятиме.

0:03:32.230,0:03:37.185
Тому добре думайте про майбутні зміни вашої[br]сторінки, коли використовуєте ці селектори.

0:03:37.185,0:03:39.990
Ви завжди можете використовувати класи,[br]якщо ви хочете бути менш залежними

0:03:39.990,0:03:41.300
від структури вашої сторінки.

0:03:41.300,0:03:45.612
Погляньмо на правила, які я створила,[br]і обдумаймо їх.

0:03:45.612,0:03:49.893
Це перше правило оформлює певним [br]способом всі елементи класу "purple",

0:03:49.893,0:03:51.383
які є всередині абзаців.

0:03:51.383,0:03:55.139
Якщо я додам в майбутньому нові абзаци з[br]елементами класу "purple",

0:03:55.139,0:03:57.541
чи захочу я, щоб вони мали[br]цю властивість?

0:03:57.551,0:04:02.531
Так, тому що я думаю, що ця властивість[br]завжди добре виглядатиме в абзаці.

0:04:02.531,0:04:05.031
Чи потрібне мені конкретніше правило?

0:04:05.031,0:04:09.066
Можливо, якби ці абзаци були завжди cеред[br]елементів класу "article",

0:04:09.066,0:04:11.279
я б могла додати це до правила.

0:04:11.279,0:04:14.688
Але зараз це правило є найбільш конкретним.

0:04:14.688,0:04:21.178
Друге правило дає всім тегам [br]всередині елементів списку певну висоту рядка.

0:04:21.178,0:04:26.039
Чи хочу я, щоб теги  всередині[br]списків завжди мали більшу висоту рядка?

0:04:26.039,0:04:30.978
Хм... мабуть, ні. Це правило, мабуть, [br]надто загальне.

0:04:30.978,0:04:36.778
Оскільки я не дуже впевнена, я додам клас[br]до тега

0:04:36.778,0:04:42.032
і потім зміню це правило на "ul.spacey",

0:04:42.032,0:04:44.652
щоб воно було більш конкретним.

0:04:44.652,0:04:48.090
В майбутньому, коли моя сторінка[br]розширюватиметься, я, можливо, робитиму

0:04:48.090,0:04:49.840
правила менш чи більш конкретними.

0:04:49.840,0:04:53.619
Додайте цей засіб до свого все більшого[br]набору засобів СSS і попрацюйте з ним,

0:04:53.619,0:04:57.663
щоб ви могли використати його,[br]коли буде така потреба.

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