TG Telegram Group & Channel
Frontend разработчик | United States America (US)
Create: Update:

🔥 Трюк с :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

🔥 Трюк с :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


>>Click here to continue<<

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






Share with your best friend
VIEW MORE

United States America Popular Telegram Group (US)