CSS :scope Pseudo Class

The CSS :scope pseudo-class represents elements that are a reference point for selectors.

The :scope is the same as :root since, at the moment, there is not a way to explicitly establish a scoped element.

Scope element is an element forming a context for a block of styles.

Version

Selectors Level 4

Syntax

:scope {
  css declarations;
}

Example of the :scope selector:

<!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;
      }
      :scope {
        background-color: #1c87c9;
      }
    </style>
  </head>
  <body>
    <h2>:scope selector example</h2>
    <div class="container">
      <section>
        <p>
          Inside the scope.
        </p>
      </section>
    </div>
  </body>
</html>

Browser support

chrome edge firefox safari opera
27.0+ 32.0+ 7.0+ 15.0+

Practice Your Knowledge

What does the scope in CSS refer to?

Quiz Time: Test Your Skills!

Ready to challenge what you've learned? Dive into our interactive quizzes for a deeper understanding and a fun way to reinforce your knowledge.

Do you find this helpful?