Як ви вже могли здогадатися, сьогодні тема дня — псевдоклас
:has(), який фактично додає можливість стилізувати батьківські елементи залежно від того, чи мають вони в собі той чи інший елемент або чи перебуває він у певному стані.Приклад:
.card:has(input:checked) {
background-color: #def;
}Тло
.card зміниться, якщо всередині буде увімкнений чекбокс.Або ще:
form:has(:invalid) {
border: 2px solid crimson;
}Форма сама підсвітиться, якщо хоча б одне поле буде помилковим. Це працює без жодних додаткових класів, без скриптів, без ручної синхронізації стану. Просто CSS.
До речі, якщо такі розбори допомагають краще розуміти можливості сучасного CSS — збережіть допис, поставте вподобайку і поширте тим, кому це теж буде цікаво. Це підтримує розвиток каналу. І мені пріятно.
Та справжня сила
:has() розкривається у поєднанні з CSS Nesting.Ось дещо розширений приклад із картинки:
.card {
section:has(&.active) {
border: 2px solid gold;
}
article:has(&) {
color: lime;
}
}Якщо
.card має клас active, тоді батьківський section, що містить цю .card, отримає рамку. А якщо .card просто існує всередині article — то цей article отримає колір тексту lime.Варто звернути увагу на кілька моментів.
По-перше, ми описуємо це з точки зору самої
.card. Саме .card ініціює правило, а не батьківський елемент.По-друге,
& — це посилання на сам елемент .card у вкладеному CSS. Тобто ми можемо всередині одного правила описати, як наявність або стан елемента впливає на зовнішній світ навколо нього.Тож це правило читається так: "знайди section, який містить нащадка .card із класом active, і знайди article, який містить нащадка .card, незалежно від стану".
Що найголовніше — усе це працює без JavaScript, без дублювання стану і без костильних класів.
Підтримується у всіх сучасних браузерах: Chrome, Safari, Edge, а також у Firefox, починаючи з версії 121.
А ви вже пробували використовувати :has() у своїх проєктах? Якщо ще ні — кліпніть двічі, ми вишлемо когось вас визволяти. Але однак напишіть у коментарях.
MDN
@babichdev