Основные преимущества использования CSS-селектора :has по сравнению с существующими методами выбора родителей:
- Возможность стилизовать родительский элемент в зависимости от наличия конкретного дочернего или соседнего элемента. 13 Например, можно проверить, есть ли у элемента изображение, и если да, то применить к нему определённые стили. 2
- Возможность показать или скрыть элементы формы по условию. 23 Например, можно проверить, какая опция выбрана в меню, и показать поле на основе этого выбора. 3
- Решение сложных ситуаций со стилизацией сгенерированного HTML. 1 Например, когда контент генерируется из Markdown-разметки и в сгенерированный код нельзя добавить классы, идентификаторы или дата-атрибуты. 1
Однако стоит учитывать, что CSS-селектор :has поддерживается не всеми браузерами. 14