🔥 Трюк с :has() в CSS — как маленький хак улучшает UX

Селектор :has() поддерживается во всех современных браузерах. Его часто называют «селектором родителя», но он куда мощнее.

Вот пример, как улучшить UX форм без JS 👇

form:has(input:invalid) button[type="submit"] {
opacity: 0.5;
pointer-events: none;
}

📌 Что делает:
Если в форме есть невалидный input, сабмит-кнопка становится неактивной.

💡 Применения :has():
- Показывать/прятать элементы в зависимости от вложенности;
- Делать UI реактивным без JS;
- Улучшать доступность форм и состояний.

✅ Минимализм, UX и современный CSS — в одном трюке. Попробуй!


CodeBase | Frontend | #CSS