CSS - Pseudo-class :scope

Quiz

The CSS pseudo-class :scope stands for elements that serve as a reference point, allowing selectors to access elements within a given scope. This feature is especially valuable for modular and component-based web development.

By using :scope, CSS styles can be contained within a specific subtree of the document, preventing them from affecting other elements outside that scope.
This isolation ensures that the styles for a particular component do not conflict with or get overridden by the styles of other components on the same page.
This modularity improves code maintainability and reduces the likelihood of unintended style conflicts in complex web applications.

Syntax

:scope {
    /* css declarations */
}

CSS :scope - Basic Example

The following example demonstrates the use of :scope pseudo-class.

<html>
<head>
<style>
   :scope h1 {
   color: red;
   background-color: lightblue;
   font-size:50px
   }
   :scope p {
   color: blue;
   background-color: beige;
   font-size:20px
   }
</style>
</head>
<body>
   <div>
   <h1>This is a heading</h1>
   </div>
   <div>
   <p>This is a paragraph</p>
   </div>
</body>
</html>

CSS :scope - Identity match

When used in a stylesheet, :scope is the same as :root, since there is currently no way to explicitly specify a scoped element.

When used with DOM API, such as querySelector(), querySelectorAll(), matches(), or Element.closest(), :scope matches the element on which the method was invoked.

Example

The following example demonstrates the usage of the :scope pseudo-class and the Element.matches() method.

The :scope pseudo-class is used to select the current element within a complex selector.
In this example, we apply the color: red; style to the :scope pseudo-class, which targets the div element.
The Element.matches() method in script is used to check if an element matches a specific selector.

<html>
<head>
<title>:scope and Element.matches() Example</title>
<style>
   :scope {
      color: red;
      font-size: 20px
   }
</style>
</head>
<body>
   <div>
      <p>This is a paragraph.</p>
      <ul>
         <li>This is list item 1</li>
         <li>This is list item 2</li>
         <li>This is list item 3</li>
      </ul>
   </div>
   <script>
      const listItems = document.querySelectorAll('li');
      listItems.forEach(item => {
         if (item.matches(':scope')) {
            item.style.backgroundColor = 'yellow';
         }
      });
   </script>
</body>
</html>

Print Page