Шпаргалка CSS селекторів потрібна, коли треба швидко згадати, як точно звернутися до елемента в HTML без зайвих експериментів. Для верстки, правок стилів і налагодження це найкоротший шлях до потрібного блоку, кнопки чи стану елемента.
Базові CSS селектори для щоденної верстки
Базові CSS селектори покривають більшість типових задач: вибір елемента за тегом, класом, id або універсальним шаблоном.
- Тег — звертається до всіх елементів одного типу: p, a, button.
- Клас — вибирає всі елементи з певним класом: .card, .active.
- id — унікальний селектор для одного елемента: #header.
- * — універсальний селектор для всіх елементів на сторінці.
Найпрактичніший вибір для більшості інтерфейсів — клас, бо він гнучкий і не прив’язує стилі до одного конкретного елемента. Перевірка проста: якщо стиль застосувався до всіх потрібних блоків, селектор підібрано правильно; якщо зачепив зайві елементи, варто звузити умову.
Складені селектори CSS для точнішого вибору
Складені селектори CSS допомагають дістатися до потрібного елемента в структурі сторінки без дублювання класів.
- Потомок — .menu a вибирає всі посилання всередині меню.
- Дочірній елемент — .menu > a вибирає лише прямі нащадки.
- Сусідній елемент — h2 + p вибирає абзац одразу після заголовка.
- Загальний сусід — h2 ~ p вибирає всі абзаци після заголовка на тому самому рівні вкладеності.
Такі селектори зручні, коли структура вже стабільна і потрібно стилізувати контент без додаткових службових класів. Якщо правило не спрацьовує, спочатку перевірте вкладеність у HTML: найчастіша помилка — очікування дочірнього елемента там, де насправді є лише потомок.
Атрибутні селектори та псевдокласи
Атрибутні селектори та псевдокласи додають точність, коли потрібно врахувати стан, тип або значення атрибута.
- [type=”email”] — вибирає поля з конкретним типом.
- [href^=”https”] — знаходить посилання, що починаються з певного значення.
- [data-state=”open”] — зручно для інтерфейсів із власними атрибутами.
- :hover, :focus, :checked — реагують на взаємодію користувача.
- :first-child, :last-child, :nth-child(2) — працюють з позицією елемента в списку.
Атрибутні селектори особливо корисні в компонентах, де класів забагато, а стан уже зашитий у розмітку. Псевдокласи зручні для перевірки поведінки: якщо елемент підсвічується при наведенні або фокусі, селектор працює правильно; якщо ні, варто перевірити, чи цей елемент взагалі може отримувати потрібний стан.
Як поєднувати CSS селектори без зайвої складності
Поєднання CSS селекторів дає контроль над точністю, але надмірна деталізація швидко робить стилі крихкими.
Практичне правило просте: починайте з найпростішого селектора, а ускладнюйте його лише тоді, коли виникає конфлікт або занадто широка область дії. Для більшості задач достатньо класу або класу з одним уточненням, наприклад .card .title чи .tabs > .tab.
- Для повторюваних компонентів краще використовувати класи.
- Для унікальних елементів — id, але без побудови стилів навколо нього.
- Для станів і взаємодії — псевдокласи та атрибути.
- Для структури сторінки — вкладені та дочірні селектори.
Якщо правило важко перевизначити, селектор, імовірно, занадто специфічний. У такому разі безпечніше спростити його зараз, ніж потім боротися з каскадом і непередбачуваними перекриттями стилів.
Коротка пам’ятка для швидкої перевірки
Шпаргалка CSS селекторів найкраще працює, коли її можна застосувати за кілька секунд під час верстки.
- Потрібен усі елементи одного типу — використовуйте тег.
- Потрібен повторюваний компонент — використовуйте клас.
- Потрібен один конкретний блок — використовуйте id або точніший клас.
- Потрібен елемент у структурі — використовуйте вкладення або дочірній селектор.
- Потрібен стан або атрибут — використовуйте псевдоклас чи атрибутний селектор.
Найкращий спосіб перевірки — змінити тимчасове стилювання на помітне, наприклад колір рамки або фон, і подивитися, чи підсвітилися саме ті елементи, які ви очікували. Якщо ні, проблема майже завжди у вкладеності, специфічності або в тому, що обрано не той тип селектора.
