scope property CSS Reference



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

Relative articles