CSS селектор :scope — точка відліку в querySelector

CSS псевдоклас :scope позначає точку відліку селектора.

автор: NagarD

Загальний опис

Найкорисніший він у JavaScript. Виклик element.querySelectorAll('> li') — помилка, бо селектор не може починатися з комбінатора. А element.querySelectorAll(':scope > li') працює й означає «прямі діти саме цього елемента».

У звичайному CSS :scope дорівнює :root, тобто елементу <html>.

автор: NagarD

Порада: Це єдиний спосіб знайти через querySelectorAll прямих дітей елемента, не зачепивши глибших нащадків.
автор: NagarD

Синтаксис

:scope

Переглядачі

Підтримка: стаціонарні переглядачі
Переглядач
scope	27+	32+	7+	15+	79+	-

Підтримка: мобільні переглядачі
Переглядач
scope	4.4+	yes	yes	7+

Приклади

+ запропонувати свій приклад у пісочниці

Тільки прямі діти списку, без вкладених.

HTML

<ul id="menu">
    <li>Пункт 1
        <ul><li>Вкладений — не потрапить</li></ul>
    </li>
    <li>Пункт 2</li>
</ul>

const menu = document.getElementById('menu');
const top = menu.querySelectorAll(':scope > li');

console.log(top.length); // 2, а не 3

автор: NagarD

Коментарі

Коментарів ще немає — будьте першим!