CSS :scope pseudo-class
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 >w3wiki</ title > < body > < h1 style="text-align: center; color: green;" id = "paragra" > Welcome to w3wiki. 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 w3wiki"; } </ script > </ body > </ html > |
Output:
Example 2:
HTML
<!DOCTYPE html> < html > < head > < title >GeeeksforBeginner</ 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;" > w3wiki </ span > </ p > </ section > </ div > </ body > </ html > |
Output:
Browser Support:
- Google Chrome 27+
- Edge 79+
- Firefox 32+
- Opera 15+
- Safari 7+
Contact Us