Frontend разработчик

🔥 Трюк с :has() в CSS: "Родительская магия"

Селектор :has() наконец стабильно работает во всех современных браузерах. Это открывает мощные возможности — реакция родителя на состояние потомка без JS!

Пример: подсветить div, если внутри есть заполненный input:

div:has(input:valid) {
  border: 2px solid green;
}

Или показать ошибку, если инпут невалиден:

form:has(input:invalid) .error-message {
  display: block;
}

📌 Зачем это нужно:
- 💡 Упрощает логику UI без JS
- 🚫 Убирает необходимость в лишних классах и хендлерах
- 💪 Делает компоненты декларативнее и чище

Проверить поддержку: https://caniuse.com/css-has

👉 @frontend_1

www.tgoop.com/frontend_1/3951

1.6K viewsApr 14 at 05:31

🔥 Трюк с :has() в CSS: "Родительская магия"

Селектор :has() наконец стабильно работает во всех современных браузерах. Это открывает мощные возможности — реакция родителя на состояние потомка без JS!

Пример: подсветить div, если внутри есть заполненный input:

div:has(input:valid) {
  border: 2px solid green;
}

form:has(input:invalid) .error-message {
  display: block;
}

BY Frontend разработчик