Skip to content
Related Articles

Related Articles

Improve Article

CSS :scope pseudo-class

  • Last Updated : 07 Sep, 2020
Geek Week

A scope element forms a context for a block of styles. That element provides a reference point for selectors to be matched against. A scope element is defined using the scoped attribute. Styles declared with scoped attributes will be applied to all elements inside its parent element.

Syntax:

:scope

Example 1:




<!DOCTYPE html>
<html>
  <title>GeeksforGeeks</title>
  <body>
   <h1 style="text-align: center;
             color: green;" id="paragra">
       Welcome to GeeksforGeeks. 
       It's a Computer Science portal.
   </h1>
   <p style="color: #000; text-align: center;" 
      id="opt">
   </p>
   <script>
     let para = 
        document.getElementById("paragra");
     let opt = 
        document.getElementById("opt");
     if (para.matches(":scope")) {
        opt.innerText = 
        "Yeah!!, we are under scope GeeksforGeeks";
     }
   </script>
  </body>
</html>

Output:



Example 2:




<!DOCTYPE html>
<html>
  <head>
    <title>GeeeksforGeeks</title>
     <style>
      #contains {
        margin: 5% auto;
        max-width: 500px;
        background-color: #eeeeee;
      }
      section {
        padding: 60px;
      }
      :scope {
        background-color: #3cd33c;
      }
      </style>
   </head>
  <body>
    <div id="contains">
      <section>
        <p>
          Inside the scope, 
          <span style="color: green;">
                GeeksforGeeks
           </span
        </p>
      </section>
    </div>
  </body>
</html>

Output:

Browser Support:

  • Chrome
  • Firefox
  • Opera
  • Safari
  • Edge



My Personal Notes arrow_drop_up
Recommended Articles
Page :