Skip to content
Related Articles

Related Articles

CSS :scope pseudo-class

Improve Article
Save Article
Like Article
  • Last Updated : 07 Sep, 2020

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.



Example 1:

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


Example 2:

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


Browser Support:

  • Chrome
  • Firefox
  • Opera
  • Safari
  • Edge

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!