CSS - Pseudo-class :scope

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>
Advertisements