Як стилізувати батьківський контейнер через :has() в Elementor

Що робить псевдоклас :has()

Селектор `.card:has(.elementor-button:hover)` означає: вибрати елемент із класом `card`, якщо всередині нього є кнопка Elementor, на яку зараз наведено курсор.

На відміну від звичайного селектора нащадка, :has() дає змогу стилізувати саме батьківський контейнер. Це корисно, коли потрібно підсвітити всю картку, а не лише окрему кнопку або посилання.

Псевдоклас працює без JavaScript і не змінює HTML-структуру сторінки. Стан картки оновлюється автоматично разом зі станом дочірнього елемента.

• `:has(.elementor-button:hover)` — картка реагує на наведення на кнопку.
• `:has(a:focus-visible)` — картка реагує на фокус посилання з клавіатури.
• `:has(.sale-badge)` — можна змінювати вигляд картки, якщо в ній є бейдж зі знижкою.
• `:has(input:checked)` — можна стилізувати блок залежно від стану перемикача або чекбокса.

Як підготувати картку в Elementor

Спочатку потрібно додати контейнеру картки власний CSS-клас. Відкрийте потрібний контейнер в Elementor і перейдіть до вкладки «Додатково». У полі CSS-класів вкажіть `card` без крапки.

Клас має бути доданий саме до батьківського контейнера, стиль якого ви хочете змінювати. Якщо додати його до кнопки, селектор :has() не матиме потрібного ефекту.

Перевірте структуру картки: кнопка або посилання мають бути вкладені всередину контейнера з класом `card`. Якщо кнопка фактично розташована за межами контейнера через особливості шаблону, селектор не спрацює.

• Контейнер картки: клас `card`.
• Усередині контейнера: заголовок, опис, зображення та кнопка або посилання.
• Клас додається без символу `.`.
• Назви класів повинні збігатися з написанням у CSS, включно з дефісами та регістром.

Базовий приклад: підсвічування картки при наведенні на кнопку

Спочатку задайте картці базовий стан. Це важливо: користувач має бачити коректний дизайн навіть у браузері, який не підтримує :has(). Для плавності переходу додайте transition до властивостей, які змінюватимуться.

Потім використайте :has() для стану наведення на кнопку та фокусу на посиланні. Такий підхід одночасно враховує взаємодію мишею і клавіатурою.

• Базові стилі працюють незалежно від підтримки :has().
• Трансформація має бути помірною, щоб картка не зміщувала сусідні елементи.
• Тінь, рамка або зміна фону зазвичай створюють зрозумілий візуальний сигнал.

.card {
  transition: box-shadow .25s ease, transform .25s ease;
}

.card:has(.elementor-button:hover),
.card:has(a:focus-visible) {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
}

Як додати CSS

Код можна розмістити в тому місці, де у вашій конфігурації доступні власні стилі: у CSS налаштуваннях сайту, теми або Elementor. Головне — щоб стилі завантажувалися на сторінці з цією карткою.

Якщо CSS додається безпосередньо до конкретного елемента, перевірте, чи підтримує це поле звичайні CSS-правила, а не лише декларації для поточного селектора. За потреби розмістіть код у глобальному CSS сайту.

Підтримка клавіатури та доступність

Стилізація лише через `:hover` не охоплює користувачів, які переміщуються сторінкою клавіатурою. Саме тому доцільно додавати умову `a:focus-visible`. Коли посилання отримує видимий клавіатурний фокус, змінюється вся картка.

Не прибирайте стандартний індикатор фокусу без заміни. Користувач повинен розуміти, який елемент зараз активний. Якщо дизайн сайту має власний стиль фокусу, зробіть його достатньо контрастним.

Якщо в картці є кнопка, а не посилання, за потреби можна врахувати обидва типи елементів окремо.

• Для посилань: `.card:has(a:focus-visible)`.
• Для кнопок: `.card:has(button:focus-visible)` або селектор класу кнопки Elementor.
• Не покладайтеся тільки на зміну тіні: фокус бажано позначати також рамкою, контуром або іншим помітним ефектом.
• Перевіряйте стан картки клавішею Tab, а не лише курсором.

.card:has(a:focus-visible),
.card:has(button:focus-visible) {
  outline: 3px solid rgba(30, 100, 220, .45);
  outline-offset: 4px;
}

Практичні варіанти використання в Elementor

У картках послуг :has() допомагає пов’язати кнопку «Дізнатися більше» з усім блоком. У картках товарів можна підсвічувати контейнер під час взаємодії з кнопкою покупки або посиланням на товар.

У Loop Grid клас має бути присутнім у шаблоні елемента, щоб кожна згенерована картка отримала однакові правила. Якщо клас призначено шаблонному контейнеру, селектор застосовується до кожного його екземпляра.

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

.card:has(.sale-badge) {
  border-color: #e53935;
}

.card:has(.elementor-button:hover) .card-title,
.card:has(a:focus-visible) .card-title {
  color: #1e64dc;
}

Сумісність, fallback і типові помилки

Підтримка :has() є в сучасних браузерах, але на старих версіях або в окремих застарілих середовищах правило може бути проігнороване. Тому базовий вигляд картки потрібно задавати без :has(), а ефект через цей псевдоклас використовувати як додаткове покращення.

Якщо браузер не розпізнає селектор :has(), група правил із ним не застосовується. Водночас базові властивості `.card` залишаються чинними, якщо вони винесені в окреме правило.

Не додавайте надмірно складні селектори без потреби. Вони ускладнюють підтримку стилів і можуть програвати правилам Elementor або теми за специфічністю.

• Не пишіть `.card:has(.elementor-button:hover)` на кнопці — клас `card` має бути на батьківському контейнері.
• Не додавайте крапку в полі CSS-класів Elementor: там потрібно вказати `card`, а не `.card`.
• Переконайтеся, що кнопка справді знаходиться всередині картки в DOM-структурі.
• Очистіть кеш плагіна, CDN і браузера після зміни CSS.
• Перевірте, чи не перекриває правило Elementor або тема.
• Не використовуйте `overflow: hidden`, якщо піднята картка або її тінь мають виходити за межі контейнера.

.card {
  transform: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
  transition: box-shadow .25s ease, transform .25s ease;
}

@supports selector(.card:has(a)) {
  .card:has(.elementor-button:hover),
  .card:has(a:focus-visible) {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, .12);
  }
}

Як перевірити, чому стиль не працює

Відкрийте інструменти розробника браузера та виберіть контейнер картки. Переконайтеся, що на ньому є клас `card`, а кнопка або посилання вкладені в цей самий елемент.

Потім перевірте правило в панелі стилів. Якщо воно перекреслене, проблема зазвичай у специфічності або порядку завантаження CSS. Якщо правило взагалі не відображається, перевірте синтаксис селектора та місце вставлення коду.

• Перевірити клас на правильному контейнері.
• Перевірити вкладеність кнопки або посилання.
• Перевірити стан `:hover` і `:focus-visible` у DevTools.
• Тимчасово додати помітний `background`, щоб швидко побачити, чи спрацьовує селектор.

Як протестувати готовий ефект

Після додавання стилів перевірте картку на реальній сторінці, а не лише в редакторі Elementor. Наведіть курсор на кнопку, перемістіть його за межі картки та переконайтеся, що стан повертається до базового.

Окремо протестуйте навігацію клавіатурою. Натискайте Tab, спостерігайте за видимим фокусом і перевіряйте, чи підсвічується правильна картка. Також перегляньте сторінку на вузькому екрані: ефект не повинен створювати горизонтальний скрол або накладатися на сусідні блоки.

• Наведення на кнопку мишею.
• Фокус на посиланні або кнопці клавішею Tab.
• Перевірка кількох карток одночасно.
• Перевірка мобільної та планшетної ширини.
• Тест у кількох сучасних браузерах.
• Перевірка після очищення кешу.