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

Псевдокласс :scope представляет элементы, которые являются опорными точками для соответствия селекторам.

:scope совпадает с псевдоклассом :root, так как на данный момент нет возможности установить scoped элемент.

Scope элемент создает контекст для стилей.

Версия

Selectors Level 4

Синтаксис

:scope {
  css declarations;
}

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Заголовок документа</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;
      }
      :scope {
      background-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>Пример селектора :scope</h2>
    <div class="container">
      <section>
        <p>
          Inside the scope.
        </p>
      </section>
      <p>
        Outside the scope.
      </p>
    </div>
  </body>
</html>

Поддержка браузера

27.0+ x 32.0+ 7.0+ 15.0+


Считаете ли это полезным?

Похожие статьи