1
00:00:00,809 --> 00:00:05,432
Перейдімо від пончиків до моркви, одного
з найкорисніших продуктів у світі,

2
00:00:05,432 --> 00:00:07,901
а також найулюбленішої їжі кроликів.

3
00:00:07,901 --> 00:00:10,534
Чи знаєте ви, що морква буває не
лише помаранчевою?

4
00:00:10,534 --> 00:00:13,535
Спочатку вона була фіолетовою. І деяка
морква досі є такою.

5
00:00:13,535 --> 00:00:16,541
Ми тут маємо коротку сторінку, що містить
список кольорів моркви

6
00:00:16,541 --> 00:00:19,541
і речення про те, що перша морква була
фіолетовою.

7
00:00:19,541 --> 00:00:25,267
Ми використали стилі, щоб зафарбувати 
назви кольорів у відповідний колір.

8
00:00:25,267 --> 00:00:28,905
Мені подобається, як стилі виглядають зі
списком, але я не впевнена, що мені

9
00:00:28,905 --> 00:00:31,905
подобається, як стиль "purple" (фіолетовий)
виглядає в тексті.

10
00:00:31,905 --> 00:00:35,035
Я думаю, мені краще не використовувати там
колір фону, а вибрати якесь менш нав'язливе

11
00:00:35,035 --> 00:00:36,215
кольорове оформлення.

12
00:00:36,215 --> 00:00:43,778
Як я можу сказати браузеру оформити
фіолетовий текст там по-іншому, ніж тут?

13
00:00:43,778 --> 00:00:47,780
Що ж, вони мають однаковий клас, тому ми
не можемо використати ім'я класу,

14
00:00:47,780 --> 00:00:49,300
доки не створимо новий клас.

15
00:00:49,300 --> 00:00:52,919
Вони також мають однакову назву тега —
.

16
00:00:52,919 --> 00:00:58,013
Тому ми не можемо використати селектор 
елемент-плюс-клас, який ми щойно вивчили.

17
00:00:58,013 --> 00:01:00,663
Є ще щось, що їх відрізняє?

18
00:01:00,663 --> 00:01:06,376
Єдина відмінність — це те, що цей тег
 знаходиться всередині тега ,

19
00:01:06,376 --> 00:01:10,985
в той час як цей тег  —
всередині тега .

20
00:01:10,985 --> 00:01:15,583
Тобто є відмінність в батьківських тегах —
тегах, які є над ними.

21
00:01:15,583 --> 00:01:21,142
За допомогою цієї інформації, ми можемо
створити правило CSS, використавши

22
00:01:21,142 --> 00:01:25,216
"селектор нащадка" — спосіб вибрати елемент
залежно від його розташування в документі.


23
00:01:25,216 --> 00:01:30,624
Наприклад, щоб вибрати фіолетовий тег
 всередині абзацу,


24
00:01:30,624 --> 00:01:35,776
ми напишемо "р", пробіл (він є дуже
важливим!)

25
00:01:35,776 --> 00:01:40,381
і потім ім'я класу — ".purple". 


26
00:01:40,381 --> 00:01:46,112
Тепер ми додамо властивості, які 
будуть менш помітними —

27
00:01:46,112 --> 00:01:50,311
колір фону "transparent" змінить те, 
що було раніше.

28
00:01:50,311 --> 00:01:58,802
Чудово. Ми змінили цей фіолетовий текст,
не змінивши цей.

29
00:01:58,802 --> 00:02:02,879
І тепер щоразу, коли ми матимемо клас
" purple" всередині параграфа, як тут,


30
00:02:02,879 --> 00:02:05,324
застосовуватиметься саме цей новий стиль.

31
00:02:05,324 --> 00:02:09,588
Ми можемо використовувати пробіл, щоб
пробратись ще глибше в наш документ.


32
00:02:09,588 --> 00:02:15,728
Скажімо, ми хочемо застосувати стиль лише
до тих тегів , які є в тегах .

33
00:02:15,728 --> 00:02:23,143
Ми починаємо з батьківського тега ,
потім ставимо пробіл та .

34
00:02:23,143 --> 00:02:28,066
І, можливо, ми дамо їм іншу висоту рядка,
щоб розділити їх ще більше.

35
00:02:28,066 --> 00:02:34,073
Чудово. Ми можемо навіть додати 
перед , якщо ми хочемо впевнетись,

36
00:02:34,073 --> 00:02:38,525
що це правило не буде застосоване до тегів
 в тегах  та .

37
00:02:38,525 --> 00:02:43,247
Бачите, для того щоб використовувати
селектор нащадка, ми маємо добре знати

38
00:02:43,247 --> 00:02:46,102
структуру документа і які теги є 
всередині інших.

39
00:02:46,102 --> 00:02:49,512
Якщо ви робите правильні відступи,
це буде просто,

40
00:02:49,512 --> 00:02:52,508
тому що ваші відступи відображатимуть
ієрархію тегів.

41
00:02:52,508 --> 00:02:56,955
Бачите, ось тут є тег , далі в ньому
є тег ,

42
00:02:56,955 --> 00:02:59,341
а всередині тега  є тег .

43
00:02:59,341 --> 00:03:02,926
Якщо ж ви не використовуєте
відступів, краще виправте це зараз,

44
00:03:02,926 --> 00:03:07,024
бо це значно полегшить ваше розуміння
структури сторінки

45
00:03:07,024 --> 00:03:10,609
та селекторів CSS, які базуються на цій 
структурі.

46
00:03:10,609 --> 00:03:13,598
Ви можете використовувати пробіл 
між будь-якими селекторами.

47
00:03:13,598 --> 00:03:19,021
Наприклад, дістатись до певного тега за
елементом з конкретним ID

48
00:03:19,021 --> 00:03:22,463
чи дістатись до елемента з ID, вказавши
перед тим назву класу,

49
00:03:22,463 --> 00:03:25,333
ви можете використовувати 
будь-які поєднання.

50
00:03:25,333 --> 00:03:29,230
Єдине, що ви маєте пам'ятати — це те, що
коли структура вашої сторінки зміниться,

51
00:03:29,230 --> 00:03:32,230
ваше старе правило CSS вже не діятиме.

52
00:03:32,230 --> 00:03:37,185
Тому добре думайте про майбутні зміни вашої
сторінки, коли використовуєте ці селектори.

53
00:03:37,185 --> 00:03:39,990
Ви завжди можете використовувати класи,
якщо ви хочете бути менш залежними

54
00:03:39,990 --> 00:03:41,300
від структури вашої сторінки.

55
00:03:41,300 --> 00:03:45,612
Погляньмо на правила, які я створила,
і обдумаймо їх.

56
00:03:45,612 --> 00:03:49,893
Це перше правило оформлює певним 
способом всі елементи класу "purple",

57
00:03:49,893 --> 00:03:51,383
які є всередині абзаців.

58
00:03:51,383 --> 00:03:55,139
Якщо я додам в майбутньому нові абзаци з
елементами класу "purple",

59
00:03:55,139 --> 00:03:57,541
чи захочу я, щоб вони мали
цю властивість?

60
00:03:57,551 --> 00:04:02,531
Так, тому що я думаю, що ця властивість
завжди добре виглядатиме в абзаці.

61
00:04:02,531 --> 00:04:05,031
Чи потрібне мені конкретніше правило?

62
00:04:05,031 --> 00:04:09,066
Можливо, якби ці абзаци були завжди cеред
елементів класу "article",

63
00:04:09,066 --> 00:04:11,279
я б могла додати це до правила.

64
00:04:11,279 --> 00:04:14,688
Але зараз це правило є найбільш конкретним.

65
00:04:14,688 --> 00:04:21,178
Друге правило дає всім тегам 
всередині елементів списку певну висоту рядка.

66
00:04:21,178 --> 00:04:26,039
Чи хочу я, щоб теги  всередині
списків завжди мали більшу висоту рядка?

67
00:04:26,039 --> 00:04:30,978
Хм... мабуть, ні. Це правило, мабуть, 
надто загальне.

68
00:04:30,978 --> 00:04:36,778
Оскільки я не дуже впевнена, я додам клас
до тега 

69
00:04:36,778 --> 00:04:42,032
і потім зміню це правило на "ul.spacey",

70
00:04:42,032 --> 00:04:44,652
щоб воно було більш конкретним.

71
00:04:44,652 --> 00:04:48,090
В майбутньому, коли моя сторінка
розширюватиметься, я, можливо, робитиму

72
00:04:48,090 --> 00:04:49,840
правила менш чи більш конкретними.

73
00:04:49,840 --> 00:04:53,619
Додайте цей засіб до свого все більшого
набору засобів СSS і попрацюйте з ним,

74
00:04:53,619 --> 00:04:57,663
щоб ви могли використати його,
коли буде така потреба.

75
00:04:57,663 --> 00:05:01,853
Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.org"