Ось готовий урок, створений за твоїм майстер-промптом. Це CS50-вайб, українська мова та повний фокус на розумінні "навіщо".

🎓 Урок: CSS-селектори. Як знайти голку в копиці HTML-тегів?

Привіт, друзі! Радий бачити вас знову.

Сьогодні ми поговоримо про одну з найважливіших концепцій у веброзробці. Уявіть, що ви написали HTML. У вас є заголовки, параграфи, кнопки... Але зараз вони виглядають, скажімо чесно, нудно. Чорний текст, білий фон, Times New Roman. Ви хочете додати стилю.

Але тут виникає проблема. Як сказати браузеру: "Гей, перефарбуй не ВСІ кнопки, а тільки ось цю, конкретну кнопку 'Купити', у червоний колір"?

Як виокремити один елемент серед тисячі інших? Без цієї навички ваш код — це просто некерована маса тексту. Саме тут на сцену виходять Селектори.

Готові розібратися, як керувати цим хаосом? Поїхали!

1. 🔥 Вступ: Проблема та мотивація

Уявіть, що ви на величезному стадіоні. Там тисячі людей. Якщо я крикну в мікрофон: "Гей, людино!" — хто обернеться? Ймовірно, всі (або ніхто, бо подумають, що це не до них). Це занадто загально.

А якщо я скажу: "Гей, людино в червоній кепці!"? Обернеться менша група. А якщо: "Гей, Іване Петренку з 3-го ряду, місце 5!"? Обернеться лише один.

У веброзробці: * HTML — це натовп на стадіоні. * CSS — це інструкції (що зробити: встати, сісти, пофарбуватись). * Селектор — це те, як саме ми звертаємось до елементів.

Чому це критично? У реальному проєкті (наприклад, Facebook чи YouTube) — десятки тисяч тегів <div>. Якщо ви не вмієте влучно "викликати" потрібний блок, ви не зможете зверстати навіть просту кнопку "Увійти". Ви або поламаєте все навколо, або нічого не зміниться.

2. 🧠 Теоретична база: Під капотом

Давайте зазирнемо "під капот". Коли браузер читає ваш CSS, він сканує сторінку і шукає збіги. Це pattern matching (зіставлення шаблонів).

Ось ієрархія точності, яку треба зрозуміти інтуїтивно:

1. Базові селектори (Фундамент)

Тег (Type selector): Найширший.
- p { ... } — "Всі параграфи на сторінці".
- Аналогія: "Всі люди".
Клас (Class selector): Золотий стандарт. Позначається крапкою ..
- .btn { ... } — "Всі елементи, які мають атрибут class="btn".
- Аналогія: "Всі, хто носить уніформу". Класи можна використовувати багаторазово!
ID (ID selector): Унікальний. Позначається решіткою #.
- #header-logo { ... } — "Елемент з id="header-logo".
- Аналогія: "Людина з конкретним паспортним номером". ID має бути лише один на сторінці.

2. Комбіновані селектори (Родинні зв'язки)

HTML — це дерево. Елементи вкладені один в одного. Ми можемо використовувати це!

Нащадок (Descendant) — Пробіл
- div a { ... } — "Знайди будь-яке посилання <a>, яке знаходиться десь всередині <div>". Неважливо, наскільки глибоко.
- Аналогія: "Всі нащадки роду Смітів (діти, онуки, правнуки)".
Дочірній (Child) — Знак >
- div > a { ... } — "Знайди посилання <a>, яке є прямим дитиною <div>".
- Аналогія: "Тільки діти Смітів (онуки не рахуються)".

3. 🧪 Приклади (від простого до реального)

Давайте подивимось на це в коді.

Приклад 1: База

У нас є такий HTML:

<h1>Привіт, світ</h1>
<p>Це текст.</p>
<p class="highlight">Це важливий текст.</p>

Питання до вас: Як мені зробити червоним тільки другий параграф?

/* Варіант А: пофарбує ВСЕ */
p { color: red; } 

/* Варіант Б: те, що треба */
.highlight { color: red; }

Пояснення: Клас .highlight є більш специфічним фільтром.

Приклад 2: Реальний світ (Навігація)

Уявіть меню сайту.

<nav>
    <ul>
        <li><a href="#">Головна</a></li>
        <li><a href="#">Про нас</a></li>
    </ul>
</nav>
<p>
    Читайте більше <a href="#">тут</a>.
</p>

Ми хочемо прибрати підкреслення у посилань, але тільки в меню. Якщо ми напишемо просто a { text-decoration: none; }, ми "зламаємо" посилання в тексті статті (те, що внизу).

Рішення (Селектор нащадка):

nav a {
    text-decoration: none;
    font-weight: bold;
}

Логіка: "Браузер, знайди nav, зазирни всередину і застосуй стиль тільки до тих a, що є всередині". Посилання внизу сторінки залишиться звичайним.

Приклад 3: "Складніший випадок" (Комбінація)

<div class="card">
    <h2>Заголовок</h2>
    <p>Текст <span class="highlight">акції</span>.</p>
    <button class="btn">Купити</button>
</div>

<div class="footer">
    <p>Контакти <span class="highlight">тут</span>.</p>
</div>

Задача: Я хочу, щоб слово "акції" було жовтим, але слово "тут" (яке теж має клас highlight) — ні.

Як це зробити? Подумайте секунду...

Відповідь:

.card .highlight {
    background-color: yellow;
}

Ми уточнюємо контекст: "Клас .highlight, але тільки той, що всередині .card".

4. 🛠 Практична частина

Час забруднити руки кодом! Відкрийте редактор (VS Code, CodePen або просто блокнот).

Дано HTML:

<div id="sidebar">
    <p>Меню</p>
    <ul>
        <li class="item">Дім</li>
        <li class="item active">Новини</li>
        <li class="item">Контакти</li>
    </ul>
</div>

<div class="content">
    <h1>Головна новина</h1>
    <p>Текст новини з <a href="#">посиланням</a>.</p>
    <ul class="list">
        <li>Пункт 1</li>
        <li>Пункт 2 <span>(важливо)</span></li>
    </ul>
</div>

Завдання:

Простий старт: Зробіть так, щоб усі теги p мали сірий колір тексту.
Робота з класом: Зробіть елемент з класом .active жирним (font-weight: bold) і червоним.
Контекст: Зробіть посилання a зеленим, але тільки якщо воно знаходиться всередині .content.
Комбінація: Змініть колір фону для .item, але тільки тих, що знаходяться всередині #sidebar.
Direct Child (складно!): Спробуйте додати рамку (border: 1px solid black) тільки для li, які є безпосередніми дітьми .list (не чіпаючи li в сайдбарі).
"А що, якщо...": Що станеться, якщо у вас буде стиль p { color: gray; } і стиль #sidebar p { color: blue; }? Якого кольору буде слово "Меню"? Перевірте і поясніть собі чому.

5. 💡 Мислення як у розробника

Ви вже знаєте синтаксис, але як думають профі?

Уникайте ID для стилів.
- Помилка новачка: Стилізувати все через #header, #footer, #button1.
- Чому це погано: ID можна використати лише раз. Якщо ви захочете другу таку ж кнопку, вам доведеться копіювати код.
- Профі: Використовують класи (.btn, .card). Це як деталі LEGO — їх можна перевикористовувати.
Не робіть селектори занадто довгими.
- Погано: body div.main-container div.content ul li a { ... }
- Добре: .content-link { ... } або .content a { ... }
- Якщо ваш селектор довший за 3 рівні, ви, ймовірно, щось робите не так. Це називається "крихкий код" — зміниш HTML, і CSS зламається.
Читабельність > Стислість. Пишіть так, щоб колега (або ви через місяць) зрозуміли, що саме ви стилізуєте, просто глянувши на селектор.

6. 🧩 Підсумок

Отже, що ми маємо?

Ми навчилися тицяти пальцем у конкретні елементи на сторінці.
Ми зрозуміли різницю між "всіма людьми" (тег), "групою в уніформі" (клас) та "конкретною особою" (ID).
Ми навчилися комбінувати умови: "знайди посилання всередині меню".

Тепер ви вмієте: Вибирати будь-який елемент з HTML і змінювати його вигляд, не ламаючи решту сторінки.

Що далі? Тепер, коли ми можемо вибрати елемент, постає питання: а як його правильно розмістити? Чому один блок штовхає інший? Чому відступи іноді працюють дивно? На наступному уроці ми розберемо Box Model (Блокову модель) — фізику світу CSS.

А поки що — це був CS50. Практикуйтесь!