Модуль 25

Псевдокласи та псевдоелементи

Ось урок, підготовлений спеціально для тебе. Уяви, що ми зараз в аудиторії Сандерс-театру в Гарварді, я ходжу сценою, а ти сидиш у першому ряду. Поїхали!

🎓 Урок: Псевдокласи та Псевдоелементи. Магія станів і декору

Привіт, друзі! Сьогодні ми поговоримо про те, що перетворює звичайну, нудну сторінку на живий інтерфейс.

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

Уявіть, що ви підходите до дверей. Звичайних дверей. Ви простягаєте руку до ручки... і нічого не відбувається. Ви не відчуваєте холоду металу, ручка не повертається, двері навіть не скриплять. Виглядає як двері, але поводиться як намальована картинка на стіні. Дивно, правда?

В інтернеті те саме. Користувач наводить мишку на кнопку, а вона — нуль реакції. Він клікає на посилання, а воно не змінює колір. Це збиває з пантелику.

Або інша ситуація: у вас є список із 1000 товарів у таблиці. Читати їх — це пекло для очей, бо всі рядки білі. Ви хочете, щоб кожен другий рядок був сірим (як у "зебрі").

Риторичне питання: Невже для цього нам треба йти в HTML і вручну дописувати клас class="grey-row" до кожного другого рядка? А якщо товарів стане 1001? Все поламається?

Чому без цього не обійтись: Сьогодні ми вивчимо інструменти, які дозволяють стилізувати елементи залежно від їхнього стану (наприклад, "на мене навели мишку") або створювати візуальні елементи, яких немає в HTML (наприклад, красиві лапки для цитат).

Це Псевдокласи та Псевдоелементи. Це як макіяж і аксесуари для вашого HTML: код залишається чистим, а вигляд змінюється кардинально.

2. 🧠 Теоретична база (без сухої академічності)

Давайте розберемося з термінологією, але не як у підручнику, а як інженери.

🔹 Псевдокласи (Починаються з :)

Уявіть хамелеона. Це все той же хамелеон, але коли він наляканий — він червоний. Коли він на листі — він зелений. Псевдоклас — це опис СТАНУ елемента.

Синтаксис: селектор:стан { ... }

  • :hover — коли мишка над елементом.
  • :active — у момент кліку (поки кнопка миші натиснута).
  • :focus — коли елемент обрано (наприклад, курсор у полі вводу). Це критично для доступності!
  • :nth-child(n) — вибирає елемент за його номером (математика в CSS!).

🔹 Псевдоелементи (Починаються з ::)

Уявіть, що ви одягаєте капелюх. Капелюх — це не частина вашого тіла, це щось додане ззовні для краси. Псевдоелемент — це створення ВІРТУАЛЬНОЇ частини елемента. Її немає в HTML-коді, вона існує тільки на екрані.

Синтаксис: селектор::частина { ... }

  • ::before — створює щось перед вмістом елемента.
  • ::after — створює щось після вмісту елемента.
  • ::first-letter — стилізує першу літеру (буквиця).

💡 Запам'ятайте головне: * Один знак : — це СТАН (Псевдоклас). * Два знаки :: — це ЧАСТИНА (Псевдоелемент). (Старі браузери розуміли один знак для всього, але ми пишемо сучасний код, тому дотримуємось стандарту).

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

Приклад 1: Жива кнопка (:hover)

Найпростіший приклад. У нас є кнопка.

button {
  background-color: blue;
  color: white;
  transition: 0.3s; /* Щоб зміна була плавною */
}

Питання до вас: Що я маю дописати, щоб при наведенні кнопка ставала темно-синьою?

button:hover {
  background-color: darkblue;
}

Пояснення: Браузер постійно стежить за курсором. Як тільки курсор перетинає межі button, браузер миттєво застосовує правила з блоку button:hover.

Приклад 2: Таблиця "Зебра" (:nth-child)

Уявіть список:

<ul>
  <li>Елемент 1</li>
  <li>Елемент 2</li>
  <li>Елемент 3</li>
  <li>Елемент 4</li>
</ul>

Ми хочемо зафарбувати кожен парний рядок.

li:nth-child(even) {
  background-color: #f0f0f0;
}

Результат: Елементи 2 і 4 стануть сірими. Магія: Якщо ми додамо ще один <li> в HTML, CSS автоматично перерахує порядок і зафарбує все правильно. Ніякої ручної роботи!

Приклад 3: Стильні цитати (::before)

Ми хочемо додати великі лапки перед цитатою, але не хочемо смітити в HTML символами.

<blockquote>Код — це поезія.</blockquote>

blockquote::before {
  content: "«";     /* Обов'язкова властивість! */
  color: red;
  font-size: 3em;
  margin-right: 10px;
}

Питання: Що станеться, якщо я забуду написати властивість content? Відповідь: Нічого не з'явиться! Псевдоелемент ::before і ::after не працює без content, навіть якщо він порожній (content: "";). Це найчастіша помилка.

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

А тепер ваша черга! Відкрийте редактор коду (або уявіть його).

Завдання 1: Світлофор Створіть три div-круги (червоний, жовтий, зелений). Зробіть так, щоб при наведенні (:hover) на будь-який з них він ставав яскравішим (змінював opacity з 0.5 на 1).

Завдання 2: "Я тебе бачу" (Поле вводу) Створіть <input type="text">. Зробіть так, щоб коли ви клікаєте в поле для друку (:focus), його рамка (border) ставала зеленою, а фон — ніжно-зеленим. Це дає користувачеві розуміння: "Я можу тут писати".

Завдання 3: Математик Є список <ul> з 10 елементів. Використовуючи :nth-child(...), зафарбуйте червоним кожен третій елемент (3, 6, 9...). Підказка: там можна писати формули типу 3n.

Завдання 4: Міні-кейс "Хлібні крихти" У вас є навігація: Головна > Каталог > Товари. В HTML це просто список посилань <a>. Використовуйте ::after для посилань, щоб додати символ стрілочки > після кожного пункту, окрім останнього. (Це завдання із зірочкою: вам знадобиться комбінація :not(:last-child) і ::after).

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

Як думає досвідчений розробник, коли використовує ці інструменти?

  1. Доступність (Accessibility) — це не опція, а база. Новачки часто прибирають "некрасиву синю рамку" навколо кнопок (outline: none), забуваючи додати свій стиль для :focus. Як думає профі: "Якщо людина не може користуватися мишкою і перемикається клавішею TAB, вона має бачити, де вона зараз знаходиться. Я обов'язково пропишу стилі для :focus".

  2. HTML має бути "семантичним", а не "декоративним". Не додавайте в HTML порожні div або span, щоб намалювати квадратик чи лінію. Як думає профі: "Мені потрібна іконка перед кнопкою? Я не буду пхати туди зайвий тег <i>. Я зроблю це через ::before, щоб HTML код залишався чистим текстом кнопки".

  3. Порядок має значення (Правило LVHA). При стилізації посилань важливий порядок написання в CSS, інакше один стан перекриє інший:

    1. :Link (звичайне)
    2. :Visited (відвідане)
    3. :Hover (наведення)
    4. :Active (натискання) Мнемоніка: Lord Vader Handle All.

6. 🧩 Підсумок

Отже, що ми сьогодні зробили? Ми навчилися керувати часом (реакція на події через псевдокласи) і простором (створення нових об'єктів через псевдоелементи), не засмічуючи при цьому наш HTML.

Тепер ви вмієте: * ✅ Робити інтерфейс інтерактивним (:hover, :active). * ✅ Піклуватися про зручність вводу (:focus). * ✅ Автоматизувати стилі для списків та таблиць (:nth-child). * ✅ Додавати декор без зайвого коду (::before, ::after).

Що далі? Зараз наші кнопки змінюють колір миттєво, ривком. У наступному уроці ми додамо "масло" в цей механізм. Ми поговоримо про Transitions (Переходи) та Animations, щоб усе рухалося плавно, як у кіно.

А поки — експериментуйте! Це був CS50... тобто, наш урок CSS. До зустрічі!

← До списку уроків Наступний урок →