Has Isn't A Parent Selector. It Deletes JavaScript.

Пошукайте у своєму коді classList.toggle.

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

Більшу частину цього коду можна видалити.

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

Він може перевіряти:

  • Наявність нащадка
  • Конкретного сусіднього елемента
  • Кількість елементів
  • Відсутність елемента

Ось кілька прикладів:

• Стилізувати картку, якщо вона містить зображення: .card:has(img) { ... }

• Стилізувати рядок, коли чекбокс позначено: .option-row:has(input:checked) { background: var(--selected-bg); }

• Змінити макет сітки залежно від кількості елементів: .grid:has(> :nth-child(4)) { grid-template-columns: repeat(4, 1fr); }

Останній приклад змінює макет за допомогою чистого CSS. Він зчитує поточний стан DOM.

Раніше вам потрібен був JavaScript, щоб виступати посередником. Дочірній елемент не міг активувати стилі на предку. Вам доводилося писати слухач подій, щоб перенести клас вище по дереву.

Тепер посередник зник.

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

Використовуйте його для:

  • Валідації форм
  • Порожніх станів у списках
  • Панелей, що перемикаються

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

Уникайте його використання для високої частоти змін, як-от позиція прокрутки або тисячі станів наведення.

Припиніть перемикати класи лише для того, щоб керувати стилями дочірнього елемента. Замість цього запитайте себе, чи може :has() виразити цю умову. Ваш CSS скоротиться, а JavaScript зникне.

:has() працює в Chrome, Firefox, Safari та Edge.

Source: https://dev.to/parsajiravand/has-isnt-a-parent-selector-it-deletes-javascript-4hej