🎯 Селектори: як вибрати не всі елементи, а тільки потрібні

🎬 Проблема: три абзаци, три різні стилі

Уявіть, що ви пишете сторінку про свій клас. На ній є три абзаци <p>:

• Перший — просто розповідь. Має бути сірим.
• Другий — важливе оголошення. Має бути червоним.
• Третій — просто розповідь. Теж має бути сірим.

Ось як виглядає ця сторінка зараз — звичайний HTML без стилів:

Усі три абзаци — чорні. Ніякого виділення. Нудно.

🥴 Спроба №1: стилізуємо через тег-селектор

Пишемо правило для тега <p> — хочемо, щоб усі абзаци були сірими:

p {
  color: gray;
}

Ось результат:

Результат: усі три абзаци стали сірими. Перший і третій — правильно. А другий мав бути червоним!

Тег-селектор не розрізняє елементи. Він каже: «усі <p> — однакові». І не дає вибрати тільки другий.

🥴 Спроба №2: перевизначимо через inline-стиль

«Ага, — думаємо ми, — зараз виправлю!» І додаємо inline-стиль тільки до другого абзацу:

<p>Перший абзац — сірий.</p>
<p style="color: red;">Другий абзац — червоний.</p>
<p>Третій абзац — сірий.</p>

А CSS залишаємо таким:

p {
  color: gray;
}

Ось результат:

Результат досягнуто! Другий абзац став червоним. Перший і третій — сірими.

Здається, все працює. Але подивіться на код уважно.

😱 Що не так із цим кодом?

Ось як виглядає такий код у редакторі — зверніть увагу, як важко знайти потрібний стиль:

<style>
  p {
    color: gray;
  }
</style>

<h1>Мій клас</h1>

<p>Наш клас дуже дружний...</p>

<p style="color: red;">Увага! У п'ятницю класна година о 14:00.</p>

<p>У нашому класі 25 учнів...</p>

Стилі в одному місці (у <style>), а один — посеред HTML. Спробуй знайди потрібне.

🏗️ Головна ідея, яку ми порушили

Пам’ятаєте, ми говорили: HTML — це структура, CSS — це оформлення?

• HTML відповідає що є на сторінці: заголовки, абзаци, списки, картинки.
• CSS відповідає як це виглядає: колір, розмір, шрифт.

І це розділення — не просто гарна ідея. Це принцип, на якому тримається вся сучасна веб-розробка.

А коли ми пишемо style="color: red;" прямо в HTML-тегу — ми змішуємо структуру з оформленням.

• HTML більше не чистий — він тепер містить ще й кольори, розміри, шрифти.
• CSS більше не єдиний — частина стилів «загубилася» в HTML.
• Змінити щось стає важко — треба переглядати весь файл вручну.

🤔 То як правильно?

Ось яку проблему треба вирішити:

Ми хочемо стилізувати окремі елементи — але не порушувати правило «HTML — структура, CSS — стилі».

Тобто:

• HTML має залишатися простим: тільки теги, ніяких style="...".
• CSS має містити усі стилі в одному місці.
• І при цьому ми маємо вміти вибрати тільки ті елементи, які нам потрібні.

❓ Поміркуйте:

• Чому тег-селектор не завжди підходить?
• Що не так з «перевизначенням» через inline-стиль?
• Якби у вас було 50 абзаців і 10 з них «особливі» — що станеться з кодом?
• Чому важливо тримати HTML і CSS окремо?

🏷️ Що таке клас і як він працює

💡 Клас — це ярлик для елемента

Раніше ми розібрали ситуацію: якщо писати стилі прямо в тегах (inline), код стає заплутаним і важким для читання. Ми хочемо стилізувати окремі елементи — але без цього хаосу. І при цьому не порушувати правило «HTML — структура, CSS — стилі».

Уявіть, у вас на сторінці три абзаци. І ви хочете, щоб два з них були сірими, а один — червоним. Якщо написати p { color: gray; } — усі три стануть сірими. А якщо p { color: red; } — усі червоними.

Треба якось позначити потрібний елемент. Сказати браузеру: «ось цей конкретний абзац — особливий, стилізуй його інакше».

Для цього в HTML існує атрибут class.

🔧 Як це виглядає в коді

Крок 1. У HTML додаємо атрибут class до потрібного елемента.

<p>Наш клас дуже дружний...</p>
<p class="important">Увага! У п'ятницю класна година о 14:00.</p>
<p>У нашому класі 25 учнів...</p>

Тут до другого абзацу ми додали атрибут class зі значенням important. Це наша позначка. Ми назвали цей клас important, бо він позначає «важливий» абзац.

Крок 2. У CSS пишемо правило для цього класу.

p {
  color: gray;
}

.important {
  color: red;
}

Крок 3. Дивимось результат.

Що сталося:

• Перше правило p { color: gray; } — стилізує усі <p>, робить їх сірими.
• Друге правило .important { color: red; } — стилізує тільки елементи з класом important.
• Другий абзац має обидві позначки — і тег <p>, і клас important. Тому правило з класом перемогло, і він став червоним.

Результат: перший і третій — сірі, другий — червоний. І все це без жодного inline-стилю.

⚠️ Назва класу — це ПРОСТО назва

Це найважливіше в цьому блоці. Дуже часто початківці думають: «Клас important робить текст червоним».

Це не так!

Клас — це просто ярлик. Він нічого не робить сам по собі. Колір визначає CSS-правило, яке ми до нього прив’язали.

Доведемо це.

Ось ми маємо клас important, і CSS-правило робить його червоним:

<p class="important">Увага!</p>

.important {
  color: red;
}

Результат: текст червоний.

А тепер давайте перейменуємо клас у HTML і CSS одночасно — назвемо його mega-cool:

<p class="mega-cool">Увага!</p>

.mega-cool {
  color: red;
}

Результат — той самий. Текст червоний. Бо колір визначає не назва класу, а правило в CSS.

І навпаки — можемо залишити назву important, але змінити колір у CSS:

.important {
  color: green;
}

Результат: текст зелений, хоч клас і називається important.

📝 Правила найменування класів

Раз клас — це просто назва, виникає питання: а як правильно його називати? Ось головні правила.

<p class="важливе">...</p>

.важливе {
  color: red;
}

📊 Підсумок правил найменування

🔄 Один клас — багато елементів

Клас — це група. Одна й та сама позначка може бути на багатьох елементах.

Наприклад, у вас на сторінці є три попередження — у різних тегах:

<p class="important">Увага! Контрольна робота в п'ятницю.</p>

<h2 class="important">Зміна розкладу</h2>

<li class="important">Домашнє завдання здати до четверга</li>

І одне правило в CSS:

.important {
  color: red;
}

Що станеться: усі три елементи — незалежно від того, що вони різні теги — стануть червоними. Бо всі вони мають клас important.

📌 Це і є сила класів. Одна позначка — і один стиль — працюють для будь-яких елементів.

🎨 Кілька класів на одному елементі

Елемент може мати не один, а кілька класів одночасно. Для цього їх пишуть через пробіл:

<p class="important big">Терміново! Важлива інформація.</p>

Тут у абзацу два класи: important і big. У CSS ми пишемо правила для кожного окремо:

.important {
  color: red;
}

.big {
  font-size: 24px;
}

Що станеться: абзац стане червоним (бо має клас important) і великим (бо має клас big).

Ось приклад із трьома абзацами — різні комбінації класів:

<p class="important">Просто попередження.</p>
<p class="important big">Термінове велике попередження.</p>
<p class="big">Просто великий текст.</p>

📌 Класи — як конструктор LEGO. Додав один клас — додав одну властивість. Можна комбінувати як завгодно.

❓ Поміркуйте:

• Що таке клас — це стиль чи позначка?
• Як браузер розуміє, що ми маємо на увазі саме клас, а не тег?
• Чи може клас important робити текст зеленим?
• Чому назва класу має описувати роль, а не вигляд?
• Навіщо на одному елементі може бути кілька класів?

🆔 Що таке id і навіщо він потрібен

Ми вже знаємо про класи. Клас — це як ярлик для групи. Один клас може бути на багатьох елементах: на трьох абзацах, двох кнопках, будь-якій кількості тегів. І це дуже зручно — одне правило, багато елементів.

Але уявіть іншу ситуацію.

На вашій сторінці є 20 абзаців. Ви хочете зробити так: коли користувач натискає кнопку «Виділити головне» — тільки один конкретний абзац (найважливіший) змінює колір. Не всі 20, а лише цей один.

Щоб це зробити — треба спочатку знайти цей абзац серед інших. І ось тут виникає питання: як його позначити?

🤔 Варіант 1: через клас

Можна дати цьому абзацу якийсь клас — наприклад, highlight. Але клас — це «ярлик для групи». І ось у чому проблема: завтра ви (або інший розробник, який допрацьовує сторінку) можете випадково повісити цей самий клас ще на два-три абзаци. Бо клас — для багатьох. І тоді замість одного «виділеного» абзацу стане три. А кнопка мала змінювати колір тільки одного.

✅ Варіант 2: через id

А ось id — це саме те, що нам треба. Він каже: «цей елемент — єдиний такий на всій сторінці. Його можна знайти за цим ідентифікатором».

📌 Коли використовувати id, а не клас:

• Коли елемент на сторінці один-єдиний.
• Коли треба знайти саме цей елемент серед багатьох.
• Коли в майбутньому до нього прив’яжуть якусь дію — наприклад, натискання кнопки, яке змінює саме цей елемент.

Приклади таких елементів на реальних сайтах:

• Шапка сайту — вона одна.
• Головне меню — воно одне.
• Кнопка «Наверх» — вона одна.
• Поле пошуку — воно одне.

✍️ Як писати id у коді

Давайте розберемо окремо, як саме записується id у HTML і в CSS.

Крок 1. У HTML — це атрибут у тегу.

<h1 id="main-title">Мій клас</h1>

📌 Зверніть увагу:

• Атрибут називається id (маленькими літерами).
• Значення пишеться в лапках — "main-title".
• Назва id — у лапках, без решітки.

Крок 2. У CSS — це селектор із решіткою #.

#main-title {
  color: navy;
}

📌 Зверніть увагу:

• Перед назвою стоїть решітка #.
• Після решітки — та сама назва, що й у HTML: main-title.
• Без лапок.

Ось як це виглядає разом:

<h1 id="main-title">Мій клас</h1>

#main-title {
  color: navy;
}

💡 Клас vs id: коротке порівняння

⚠️ Важливе уточнення: id — багато в CSS, один в HTML

Це момент, який часто плутають. Розберімо уважно.

У CSS ми можемо описати скільки завгодно різних id:

#header {
  background-color: navy;
}

#main-title {
  color: red;
}

#footer {
  color: gray;
}

#search {
  font-size: 18px;
}

Чотири різних id — і це нормально. Кожен описує свій унікальний елемент.

Але в HTML кожен з цих id можна використати тільки ОДИН раз:

<h1 id="main-title">Мій клас</h1>
<!-- ✔ ОК — це єдиний елемент з таким id -->

<footer id="footer">...</footer>
<!-- ✔ ОК -->

<div id="header">...</div>
<!-- ✔ ОК -->

<form id="search">...</form>
<!-- ✔ ОК -->

А ось так — помилка:

<h1 id="main-title">Мій клас</h1>
<p id="main-title">Це теж заголовок?</p>
<!-- ✘ ПОМИЛКА — два елементи з однаковим id -->

📌 У нашому курсі — переважно класи

Хоч ми й розібрали id, у нашому курсі ми будемо переважно використовувати класи. Ось чому:

• Класи гнучкіші. Один клас — на багато елементів. Не треба думати «а чи не буде конфлікту?».
• Класи безпечніші. Якщо випадково повторите клас — нічого не зламається. А якщо повторите id — браузер «з’їсть» один із них.
• Так роблять у реальних проєктах. У сучасній веб-розробці для стилів майже завжди використовують класи. У сучасній веб-розробці для стилів майже завжди використовують класи — вони гнучкіші й безпечніші. А id залишають для інших задач: наприклад, коли треба знайти конкретний елемент у коді скрипта (щоб при натисканні кнопки щось змінилося) або створити посилання на певний блок сторінки. У нашому курсі ми працюватимемо зі стилями, тому для нас основне — це класи.

📌 id треба знати — бо він є в HTML і ви будете його зустрічати в чужому коді. Але використовувати для стилів ми будемо майже завжди класи.

🔧 Повний приклад

<h1 id="main-title">Мій клас</h1>
<p>Наш клас дуже дружний...</p>
<p class="important">Увага! У п'ятницю класна година.</p>
<p class="important">Не забудьте щоденники!</p>

#main-title {
  color: navy;
  text-align: center;
}

.important {
  color: red;
}

Що сталося:

• Заголовок <h1> має id="main-title" — він один такий на сторінці. Тому правило #main-title застосувалося саме до нього.
• Два абзаци мають клас important — вони обидва стали червоними, бо клас може бути на багатьох елементах.

❓ Поміркуйте:

• Чим id відрізняється від класу?
• Чому id не можна використовувати двічі на одній сторінці?
• Що станеться, якщо дати двом елементам однаковий id?
• Коли краще використати клас, а коли — id?

✅ Підсумок

Ми розібрали тему селекторів — як вибирати не всі елементи, а тільки потрібні. Ось головне, що варто запам’ятати.

❓ Перевірте себе

Спробуйте відповісти на кожне запитання самостійно — а потім натисніть, щоб перевірити себе.