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 works in Firefox, Opera and Safari. 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. You can see the current support in this table on the MDN web docs.

Written by . Last updated March 26, 2019 at 3:26 pm by Manoela Ilic.

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