Scope :scope

The :scope pseudo-class represents any element that is a 'scope element.' This is a (potentially empty) set of elements that provide a reference point for selectors to match against, such as that specified by the querySelector() call in DOM, or the parent element of a scoped <style> element in HTML5.

In HTML5, the scoped [<style scoped>] attribute is a boolean attribute. When present, it specifies that the styles are only applied to this element's parent element and that element's child elements.

Browser Support

Chrome Firefox Safari Opera IE Edge
Desktop yes yes yes yes no no
Mobile yes yes yes no no no

Syntax

E:scope {
/* Declarations */
}

Example

/* In this example, the second div will have a red background, but the first div will not. Additionally, all paragraphs that are children of the second div will have blue text. */

<div>
<p>This paragraph is outside the scope.</p>
<div>
<style scoped>
:scope {
background-color: red;
}
p {
color: blue;
}
</style>
<p>This paragraph is inside the scope.</p>
</div>
</div>

Information is based on Selectors Level 4 - W3C Working Draft (last updated on May 2, 2013)
Copyright © 2013 W3C® (MIT, ERCIM, Keio, Beihang), All Rights Reserved. W3C liability, trademark and document use rules apply.