Definition and Usage
The :scope CSS pseudo-class matches the elements that are a reference point for selectors to match against. In HTML, a new reference point can be defined using the scoped attribute of the <style>. If no such attribute is used on an HTML page, the reference point is the <html> element, making :scope equivalent to :scope
Syntax
:scope { style properties }
Examples
<article>
The element selected by :scope has a lime background if your browser supports scoped stylesheet.
<section>
<p>Outside scope.</p>
</section>
<section>
<style scoped>
:scope { background-color: lime; }
</style>
<p>Inside scope.</p>
</section>
<section>
<p>Outside scope.</p>
</section
</article>
Compatibility
Desktop browsers
Feature |
Chrome |
Firefox (Gecko) |
Internet Explorer |
Opera |
Safari |
Basic support |
NA |
Not supported |
Not supported |
Not supported |
Not supported |
Mobile browsers
Feature |
Android |
Firefox Mobile (Gecko) |
IE Mobile |
Opera Mobile |
Safari Mobile |
Basic support |
NA |
Not supported |
Not supported |
Not supported |
Not supported |