CSS :scope pseudo-class Last Updated : 30 Aug, 2022 Comments Improve Suggest changes 1 Likes Like Report 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: HTML <!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: HTML <!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: Google Chrome 27+Edge 79+Firefox 32+Opera 15+Safari 7+ Create Quiz Comment T thacker_shahid Follow 1 Improve T thacker_shahid Follow 1 Improve Article Tags : Web Technologies CSS CSS-Selectors Explore CSS Introduction 3 min read CSS Syntax 3 min read CSS Selectors 6 min read CSS Comments 2 min read CSS Colors 5 min read CSS Borders 5 min read CSS Margins 4 min read CSS Height and Width 4 min read CSS Outline 4 min read CSS Fonts 4 min read Like