На пути к публикации селектора CSS :has() в старом Альманахе произошло небольшое событие. Первоначально я описал :has() как «прощающий» селектор, идея которого заключалась в том, что все в его аргументе оценивается, даже если один или несколько элементов недействительны.
Видите ::scoobydoo? Это совершенно недопустимо. Снисходительный список селекторов игнорирует этот фальшивый селектор и продолжает оценивать остальные элементы, как если бы он был написан следующим образом:
:has() действительно был снисходительным селектором в предыдущем черновике от 7 мая 2022 года. Но это изменилось после сообщения о том, что снисходительный характер конфликтует с jQuery, когда :has() содержит сложный селектор (например, заголовок h2 + p) . Всего несколько недель назад W3C принял решение сделать :has() «неумолимым» селектором.
Итак, что же с нашим предыдущим примером? Весь список селекторов недействителен, потому что фиктивный селектор недействителен. Но два других щадящих селектора, :is() и :where(), остаются без изменений.
Для этого есть небольшой обходной путь. Помните, что :is() и :where() снисходительны, даже если :has() нет. Это означает, что мы можем вложить любой из этих селекторов в :has(), чтобы получить более щадящее поведение:
Какой из них вы используете, может иметь значение, потому что специфичность :is() определяется наиболее конкретным элементом в его списке. Итак, если вам нужно что-то менее конкретное, вам лучше обратиться к :where(), так как это не увеличивает показатель специфичности.
Перевод статьи :has is an unforgiving selector.