Перейдімо від пончиків до моркви, одного
з найкорисніших продуктів у світі,

а також найулюбленішої їжі кроликів.

Чи знаєте ви, що морква буває не
лише помаранчевою?

Спочатку вона була фіолетовою. І деяка
морква досі є такою.

Ми тут маємо коротку сторінку, що містить
список кольорів моркви

і речення про те, що перша морква була
фіолетовою.

Ми використали стилі, щоб зафарбувати 
назви кольорів у відповідний колір.

Мені подобається, як стилі виглядають зі
списком, але я не впевнена, що мені

подобається, як стиль "purple" (фіолетовий)
виглядає в тексті.

Я думаю, мені краще не використовувати там
колір фону, а вибрати якесь менш нав'язливе

кольорове оформлення.

Як я можу сказати браузеру оформити
фіолетовий текст там по-іншому, ніж тут?

Що ж, вони мають однаковий клас, тому ми
не можемо використати ім'я класу,

доки не створимо новий клас.

Вони також мають однакову назву тега —
.

Тому ми не можемо використати селектор 
елемент-плюс-клас, який ми щойно вивчили.

Є ще щось, що їх відрізняє?

Єдина відмінність — це те, що цей тег
 знаходиться всередині тега ,

в той час як цей тег  —
всередині тега .

Тобто є відмінність в батьківських тегах —
тегах, які є над ними.

За допомогою цієї інформації, ми можемо
створити правило CSS, використавши

"селектор нащадка" — спосіб вибрати елемент
залежно від його розташування в документі.

Наприклад, щоб вибрати фіолетовий тег
 всередині абзацу,

ми напишемо "р", пробіл (він є дуже
важливим!)

і потім ім'я класу — ".purple".

Тепер ми додамо властивості, які 
будуть менш помітними —

колір фону "transparent" змінить те, 
що було раніше.

Чудово. Ми змінили цей фіолетовий текст,
не змінивши цей.

І тепер щоразу, коли ми матимемо клас
" purple" всередині параграфа, як тут,

застосовуватиметься саме цей новий стиль.

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

Скажімо, ми хочемо застосувати стиль лише
до тих тегів , які є в тегах .

Ми починаємо з батьківського тега ,
потім ставимо пробіл та .

І, можливо, ми дамо їм іншу висоту рядка,
щоб розділити їх ще більше.

Чудово. Ми можемо навіть додати 
перед , якщо ми хочемо впевнетись,

що це правило не буде застосоване до тегів
 в тегах  та .

Бачите, для того щоб використовувати
селектор нащадка, ми маємо добре знати

структуру документа і які теги є 
всередині інших.

Якщо ви робите правильні відступи,
це буде просто,

тому що ваші відступи відображатимуть
ієрархію тегів.

Бачите, ось тут є тег , далі в ньому
є тег ,

а всередині тега  є тег .

Якщо ж ви не використовуєте
відступів, краще виправте це зараз,

бо це значно полегшить ваше розуміння
структури сторінки

та селекторів CSS, які базуються на цій 
структурі.

Ви можете використовувати пробіл 
між будь-якими селекторами.

Наприклад, дістатись до певного тега за
елементом з конкретним ID

чи дістатись до елемента з ID, вказавши
перед тим назву класу,

ви можете використовувати 
будь-які поєднання.

Єдине, що ви маєте пам'ятати — це те, що
коли структура вашої сторінки зміниться,

ваше старе правило CSS вже не діятиме.

Тому добре думайте про майбутні зміни вашої
сторінки, коли використовуєте ці селектори.

Ви завжди можете використовувати класи,
якщо ви хочете бути менш залежними

від структури вашої сторінки.

Погляньмо на правила, які я створила,
і обдумаймо їх.

Це перше правило оформлює певним 
способом всі елементи класу "purple",

які є всередині абзаців.

Якщо я додам в майбутньому нові абзаци з
елементами класу "purple",

чи захочу я, щоб вони мали
цю властивість?

Так, тому що я думаю, що ця властивість
завжди добре виглядатиме в абзаці.

Чи потрібне мені конкретніше правило?

Можливо, якби ці абзаци були завжди cеред
елементів класу "article",

я б могла додати це до правила.

Але зараз це правило є найбільш конкретним.

Друге правило дає всім тегам 
всередині елементів списку певну висоту рядка.

Чи хочу я, щоб теги  всередині
списків завжди мали більшу висоту рядка?

Хм... мабуть, ні. Це правило, мабуть, 
надто загальне.

Оскільки я не дуже впевнена, я додам клас
до тега

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

щоб воно було більш конкретним.

В майбутньому, коли моя сторінка
розширюватиметься, я, можливо, робитиму

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

Додайте цей засіб до свого все більшого
набору засобів СSS і попрацюйте з ним,

щоб ви могли використати його,
коли буде така потреба.

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