CSS Reference Pseudo-class

:scope

The :scope CSS pseudo-class selector represents any element that is a :scope element.

A scope element is an element that forms a context for a block of styles. Such an element also provides a reference point for selectors to match against.

A scope element can be defined using the scoped attribute. A simple example would look like the following:

<section>
    <style scoped>
        /* style declarations here apply to the <section>'s content */
        p {
            color: #0099cc; /* a blue color */
        }
    </style>
    <p>
        I am in the scope.
    </p>
</section>
<p>
    I am outside the scope.
</p>
                

The styles declared inside a style element with a scoped attributes will be applied to any elements inside its parent element (the section in this example). These styles will also override the global styles defined in the document head (whether inline or via external style sheets).

The :scope pseudo-class selector matches the context of the block of scoped styles. In the above example, the section element is matched by :scope. So, this:

<section>
    <style scoped>
        /* style declarations here apply to the <section>'s content */
        p {
            color: #0099cc; /* a blue color */
        }
        
            :scope {
                background-color: black;
            }
        
    </style>
    <p>
        I am in the scope.
    </p>
</section>
<p>
    I am outside the scope.
</p>
                

Will apply a black background color to the section element. It is called the scoping root or the local context of <style scoped>.

If the selector is scoped and the scoping root is an element, then :scope represents the scoping root; otherwise, it represents the root of the document (equivalent to :root). For example, in the following code, the :scope will match the root document:

<section>
    <style> <!-- no scoped attribute set and hence no scope reference element -->
        /* style declarations here apply to the <section>'s content */
        p {
            color: #0099cc; /* a blue color */
        }
        
            :scope {
                background-color: black;
            }
        
    </style>
    <p>
        I am in the scope.
    </p>
</section>
<p>
    I am outside the scope.
</p>
                

Live Demo

If your browser fully supports scoped styles, the first line of text should be white on a black background, and the root html element should have a green background color.

View this demo on the Codrops Playground

Browser Support

The :scope pseudo-class selector currently only works in Firefox. There’s a possibility that this selector be at risk of removal some time in the future. This entry will be updated with more information as soon as it’s available.

The following table shows current browser support for the scoped attribute:

Scoped CSS

Allows CSS rules to be scoped to part of the document, based on the position of the style element. The attribute has been [removed from the current specification](https://github.com/whatwg/html/issues/552).

Unofficial or W3C "Note"

Supported from the following versions:

Desktop

  • No
  • No
  • No
  • No
  • No

Mobile / Tablet

  • No
  • No
  • No
  • No
  • No

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

Written by

Last updated December 11, 2016 at 10:03 pm by Mary Lou

Do you have a suggestion, question or want to contribute? Submit an issue.