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 |
