:has — неумолимый селектор

На пути к публикации произошло небольшое событие. CSS :has() селектор к старому альманаху. изначально я описал :has() как «прощающий» селектор, идея которого заключается в том, что все в его аргументе оценивается, даже если один или несколько элементов недействительны.

/* Example: Do not use! */
article:has(h2, ul, ::-scoobydoo) { }

Читать ::scoobydoo там? Это совершенно недействительно. Снисходительный список селекторов игнорирует этот фальшивый селектор и продолжает оценивать остальные элементы, как если бы он был написан следующим образом:

article:has(h2, ul) { }

:has() был действительно прощающим селектором в предыдущем проекте от 7 мая 2022 г.. Но это изменилось после сообщения о проблеме что прощающая природа конфликтует с jQuery, когда :has() содержит сложный селектор (например, header h2 + p). W3C остановился на решении сделать :has() «неумолимый» селектор всего несколько недель назад.

Итак, наш предыдущий пример? Весь список селекторов недействителен, потому что фиктивный селектор недействителен. Но два других прощающих селектора, :is() и :where(), остаются без изменений.

Для этого есть небольшой обходной путь. Воспоминание, :is() и :where()прощают, даже если :has() не является. Это означает, что мы можем вложить любой из этих селекторов в :has() чтобы добиться более снисходительного поведения:

article:has(:where(h2, ul, ::-scoobydoo)) { }

Какой из них вы используете, может иметь значение, потому что специфика :is() определяется наиболее конкретным элементом в его списке. Итак, если вам нужно что-то менее конкретное, вам лучше обратиться к :where() так как это не добавляет к показателю специфичности.

/* Specificity: (0,0,1) */
article:has(:where(h2, ul, ::-scoobydoo)) { } /* Specificity: (0,0,2) */
article:has(:is(h2, ul, ::-scoobydoo)) { }

Мы обновили несколько наших сообщений, чтобы отразить последнюю информацию. Я вижу много других в дикой природе, которые нуждаются в обновлении, так что просто небольшая социальная реклама для тех, кому нужно сделать то же самое.

• SEO-контент и PR-распределение. Получите усиление сегодня.
• Платоблокчейн. Интеллект метавселенной Web3. Расширение знаний. Доступ здесь.
• Источник: https://css-tricks.com/has-is-an-unforgiving-selector/