:has — невблаганний селектор

Перевидано Платоном

читають: 0

:has — невблаганний селектор PlatoBlockchain Data Intelligence. Вертикальний пошук. Ai.

На шляху до публікації сталася дрібниця 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)) { }

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