Псевдокласс CSS :scope

Псевдокласс CSS :scope представляет собой элемент-ссылку для селекторов, например, корневой элемент в Shadow DOM или элемент, переданный в querySelector().

Он часто используется в JavaScript-запросах к DOM для ограничения поиска селекторов определённым поддеревом. Обратите внимание, что устаревший атрибут <style scoped> больше не поддерживается в современных браузерах, однако :scope остаётся актуальным для запросов к DOM.

Версия

Selectors Level 4

Синтаксис

Синтаксис CSS :scope

css

:scope {
  css declarations;
}

Пример использования селектора :scope:

Пример кода CSS :scope

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .container {
        margin: 40px auto;
        max-width: 700px;
        background-color: #eeeeee;
        padding: 20px;
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.25);
      }
      section {
        padding: 30px;
      }
    </style>
  </head>
  <body>
    <h2>:scope selector example</h2>
    <div class="container">
      <section>
        <p>
          Inside the scope.
        </p>
      </section>
    </div>
    <script>
      const container = document.querySelector('.container');
      const scopeElement = container.querySelector(':scope > section');
      scopeElement.style.backgroundColor = '#1c87c9';
      scopeElement.style.color = '#fff';
    </script>
  </body>
</html>

Try it Yourself »

Практика

Что означает scope в CSS?

Scope в CSS указывает на часть кода, где переменная или функция может быть доступна.Scope в CSS указывает на стили, которые доступны только в пределах блока кода, в котором они объявлены.Scope в CSS указывает на размер экрана отображения веб-страницы.Scope в CSS указывает на ограничения, установленные на объём данных, которые могут передаваться на сайте.

Псевдокласс CSS :scope ​

Версия ​

Синтаксис ​

Пример использования селектора :scope: ​

Практика ​

Псевдокласс CSS :scope

Версия

Синтаксис

Пример использования селектора :scope:

Практика