WEBVTT 00:00:00.809 --> 00:00:05.432 Перейдімо від пончиків до моркви, одного з найкорисніших продуктів у світі, 00:00:05.432 --> 00:00:07.901 а також найулюбленішої їжі кроликів. 00:00:07.901 --> 00:00:10.534 Чи знаєте ви, що морква буває не лише помаранчевою? 00:00:10.534 --> 00:00:13.535 Спочатку вона була фіолетовою. І деяка морква досі є такою. 00:00:13.535 --> 00:00:16.541 Ми тут маємо коротку сторінку, що містить список кольорів моркви 00:00:16.541 --> 00:00:19.541 і речення про те, що перша морква була фіолетовою. 00:00:19.541 --> 00:00:25.267 Ми використали стилі, щоб зафарбувати назви кольорів у відповідний колір. 00:00:25.267 --> 00:00:28.905 Мені подобається, як стилі виглядають зі списком, але я не впевнена, що мені 00:00:28.905 --> 00:00:31.905 подобається, як стиль "purple" (фіолетовий) виглядає в тексті. 00:00:31.905 --> 00:00:35.035 Я думаю, мені краще не використовувати там колір фону, а вибрати якесь менш нав'язливе 00:00:35.035 --> 00:00:36.215 кольорове оформлення. 00:00:36.215 --> 00:00:43.778 Як я можу сказати браузеру оформити фіолетовий текст там по-іншому, ніж тут? 00:00:43.778 --> 00:00:47.780 Що ж, вони мають однаковий клас, тому ми не можемо використати ім'я класу, 00:00:47.780 --> 00:00:49.300 доки не створимо новий клас. 00:00:49.300 --> 00:00:52.919 Вони також мають однакову назву тега — . 00:00:52.919 --> 00:00:58.013 Тому ми не можемо використати селектор елемент-плюс-клас, який ми щойно вивчили. 00:00:58.013 --> 00:01:00.663 Є ще щось, що їх відрізняє? 00:01:00.663 --> 00:01:06.376 Єдина відмінність — це те, що цей тег знаходиться всередині тега , 00:01:06.376 --> 00:01:10.985 в той час як цей тег — всередині тега . 00:01:10.985 --> 00:01:15.583 Тобто є відмінність в батьківських тегах — тегах, які є над ними. 00:01:15.583 --> 00:01:21.142 За допомогою цієї інформації, ми можемо створити правило CSS, використавши 00:01:21.142 --> 00:01:25.216 "селектор нащадка" — спосіб вибрати елемент залежно від його розташування в документі. 00:01:25.216 --> 00:01:30.624 Наприклад, щоб вибрати фіолетовий тег всередині абзацу, 00:01:30.624 --> 00:01:35.776 ми напишемо "р", пробіл (він є дуже важливим!) 00:01:35.776 --> 00:01:40.381 і потім ім'я класу — ".purple". 00:01:40.381 --> 00:01:46.112 Тепер ми додамо властивості, які будуть менш помітними — 00:01:46.112 --> 00:01:50.311 колір фону "transparent" змінить те, що було раніше. 00:01:50.311 --> 00:01:58.802 Чудово. Ми змінили цей фіолетовий текст, не змінивши цей. 00:01:58.802 --> 00:02:02.879 І тепер щоразу, коли ми матимемо клас " purple" всередині параграфа, як тут, 00:02:02.879 --> 00:02:05.324 застосовуватиметься саме цей новий стиль. 00:02:05.324 --> 00:02:09.588 Ми можемо використовувати пробіл, щоб пробратись ще глибше в наш документ. 00:02:09.588 --> 00:02:15.728 Скажімо, ми хочемо застосувати стиль лише до тих тегів , які є в тегах . 00:02:15.728 --> 00:02:23.143 Ми починаємо з батьківського тега , потім ставимо пробіл та . 00:02:23.143 --> 00:02:28.066 І, можливо, ми дамо їм іншу висоту рядка, щоб розділити їх ще більше. 00:02:28.066 --> 00:02:34.073 Чудово. Ми можемо навіть додати перед , якщо ми хочемо впевнетись, 00:02:34.073 --> 00:02:38.525 що це правило не буде застосоване до тегів в тегах та . 00:02:38.525 --> 00:02:43.247 Бачите, для того щоб використовувати селектор нащадка, ми маємо добре знати 00:02:43.247 --> 00:02:46.102 структуру документа і які теги є всередині інших. 00:02:46.102 --> 00:02:49.512 Якщо ви робите правильні відступи, це буде просто, 00:02:49.512 --> 00:02:52.508 тому що ваші відступи відображатимуть ієрархію тегів. 00:02:52.508 --> 00:02:56.955 Бачите, ось тут є тег , далі в ньому є тег , 00:02:56.955 --> 00:02:59.341 а всередині тега є тег . 00:02:59.341 --> 00:03:02.926 Якщо ж ви не використовуєте відступів, краще виправте це зараз, 00:03:02.926 --> 00:03:07.024 бо це значно полегшить ваше розуміння структури сторінки 00:03:07.024 --> 00:03:10.609 та селекторів CSS, які базуються на цій структурі. 00:03:10.609 --> 00:03:13.598 Ви можете використовувати пробіл між будь-якими селекторами. 00:03:13.598 --> 00:03:19.021 Наприклад, дістатись до певного тега за елементом з конкретним ID 00:03:19.021 --> 00:03:22.463 чи дістатись до елемента з ID, вказавши перед тим назву класу, 00:03:22.463 --> 00:03:25.333 ви можете використовувати будь-які поєднання. 00:03:25.333 --> 00:03:29.230 Єдине, що ви маєте пам'ятати — це те, що коли структура вашої сторінки зміниться, 00:03:29.230 --> 00:03:32.230 ваше старе правило CSS вже не діятиме. 00:03:32.230 --> 00:03:37.185 Тому добре думайте про майбутні зміни вашої сторінки, коли використовуєте ці селектори. 00:03:37.185 --> 00:03:39.990 Ви завжди можете використовувати класи, якщо ви хочете бути менш залежними 00:03:39.990 --> 00:03:41.300 від структури вашої сторінки. 00:03:41.300 --> 00:03:45.612 Погляньмо на правила, які я створила, і обдумаймо їх. 00:03:45.612 --> 00:03:49.893 Це перше правило оформлює певним способом всі елементи класу "purple", 00:03:49.893 --> 00:03:51.383 які є всередині абзаців. 00:03:51.383 --> 00:03:55.139 Якщо я додам в майбутньому нові абзаци з елементами класу "purple", 00:03:55.139 --> 00:03:57.541 чи захочу я, щоб вони мали цю властивість? 00:03:57.551 --> 00:04:02.531 Так, тому що я думаю, що ця властивість завжди добре виглядатиме в абзаці. 00:04:02.531 --> 00:04:05.031 Чи потрібне мені конкретніше правило? 00:04:05.031 --> 00:04:09.066 Можливо, якби ці абзаци були завжди cеред елементів класу "article", 00:04:09.066 --> 00:04:11.279 я б могла додати це до правила. 00:04:11.279 --> 00:04:14.688 Але зараз це правило є найбільш конкретним. NOTE Paragraph 00:04:14.688 --> 00:04:21.178 Друге правило дає всім тегам всередині елементів списку певну висоту рядка. NOTE Paragraph 00:04:21.178 --> 00:04:26.039 Чи хочу я, щоб теги всередині списків завжди мали більшу висоту рядка? 00:04:26.039 --> 00:04:30.978 Хм... мабуть, ні. Це правило, мабуть, надто загальне. 00:04:30.978 --> 00:04:36.778 Оскільки я не дуже впевнена, я додам клас до тега 00:04:36.778 --> 00:04:42.032 і потім зміню це правило на "ul.spacey", 00:04:42.032 --> 00:04:44.652 щоб воно було більш конкретним. 00:04:44.652 --> 00:04:48.090 В майбутньому, коли моя сторінка розширюватиметься, я, можливо, робитиму 00:04:48.090 --> 00:04:49.840 правила менш чи більш конкретними. 00:04:49.840 --> 00:04:53.619 Додайте цей засіб до свого все більшого набору засобів СSS і попрацюйте з ним, 00:04:53.619 --> 00:04:57.663 щоб ви могли використати його, коли буде така потреба. 00:04:57.663 --> 00:05:01.853 Переклад на українську мову: Зоряна Гаврилюк, рев'юер: Юлія Білаш, Благодійний фонд "MagneticOne.org"