: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 (tested using latest versions)

Desktop
Google Chrome
Yes
Mozilla Firefox
Yes
Safari
Yes
Opera Browser
Yes
Internet Explorer
No
Mobile
Android Browser
Yes
Chrome for Android
Yes
Mozilla Firefox Mobile
Yes
Safari iOS
Yes
Opera Mobile
No
IE Mobile
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.