:scope

:scope — псевдокласс, который соответствует «текущему корню» селектора.

• В JavaScript, при вызове element.querySelector(All), :scope указывает на сам element. Это позволяет удобно писать селекторы с комбинаторами (>, +, ~) относительно элемента, с которого начат поиск.
• В CSS, внутри @scope :scope соответствует корневому элементу области (селектору‑якорю правила @scope).

Выделим только непосредственных детей заданного блока — с помощью :scope > … при поиске в JS. Полная интерактивная версия — в демо ниже.

        
          
          const card = document.querySelector('.card')const directChildren = card.querySelectorAll(':scope > ul > li')directChildren.forEach((li) => li.classList.add('highlight'))
          const card = document.querySelector('.card')
const directChildren = card.querySelectorAll(':scope > ul > li')
directChildren.forEach((li) => li.classList.add('highlight'))

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Синтаксис — обычный псевдокласс в селекторе:

        
          
          /* Внутри @scope :scope — это корень области */@scope (.card) {  :scope { outline: 2px dashed #2E9AFF; }  :scope > h2 { color: #2E9AFF; }}
          /* Внутри @scope :scope — это корень области */
@scope (.card) {
  :scope { outline: 2px dashed #2E9AFF; }
  :scope > h2 { color: #2E9AFF; }
}

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

В JavaScript :scope особенно полезен с относительными комбинаторами:

        
          
          // Только непосредственные дочерние <li>el.querySelectorAll(':scope > li')// Соседний элемент того же уровняel.querySelectorAll(':scope + .sibling')// Все последующие элементы того же уровняel.querySelectorAll(':scope ~ .others')
          // Только непосредственные дочерние <li>
el.querySelectorAll(':scope > li')

// Соседний элемент того же уровня
el.querySelectorAll(':scope + .sibling')

// Все последующие элементы того же уровня
el.querySelectorAll(':scope ~ .others')

        
        
          
            
            Скопировать
            Скопировано
            Не удалось скопировать
          
        
      

Обычно селектор вроде > li в DOM‑методах нельзя написать «сам по себе», потому что нужен левый операнд — от чего вести отсчёт. :scope выступает как явный левый операнд и указывает, что ориентир — текущий корень поиска (элемент, на котором вызван querySelector(All)). Поэтому el.querySelectorAll(':scope > li') выбирает только непосредственных детей el, а не всех потомков.

В стилях @scope ограничивает действие селекторов подблока. Там :scope ссылается на корневой элемент области — это делает селекторы внутри правила выразительнее и локальнее.

💡 Используйте :scope для надёжного выбора «только детей» при работе с вложенными списками и компонентами.
💡 У :scope обычная «весомость» псевдокласса. Помните, что добавляя :scope, вы увеличиваете специфичность селектора.
💡 В CSS без @scope :scope обычно совпадает с корнем документа и в шаблонных стилях встречается реже; максимальную пользу псевдокласс приносит в DOM‑поиске и внутри @scope.