Наші добровольці ще не переклали статтю цією мовою: Українська. Долучайтеся й допоможіть це зробити!
Ви також можете прочитати цю статтю іншою мовою: English (US).
The :scope
CSS pseudo-class represents elements that are a reference point for selectors to match against.
/* Selects a scoped element */ :scope { background-color: lime; }
Currently, when used in a stylesheet, :scope
is the same as :root
, since there is not at this time a way to explicitly establish a scoped element. When used from a DOM API such as querySelector()
, querySelectorAll()
, matches()
, or Element.closest()
, :scope
matches the element you called the method on.
Syntax
:scope
Example
In this simple example, we demonstrate that using the :scope
pseudo-class from the Element.matches()
method matches the element on which it's called.
JavaScript
let paragraph = document.getElementById("para"); let output = document.getElementById("output"); if (paragraph.matches(":scope")) { output.innerText = "Yep, the element is its own scope as expected!"; }
HTML
<p id="para"> This is a paragraph. It is not an interesting paragraph. Sorry about that. </p> <p id="output"></p>
Result
Specifications
Specification | Status | Comment |
---|---|---|
Selectors Level 4 The definition of ':scope' in that specification. |
Working Draft | Initial definition. |
Browser compatibility
Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Basic support | Chrome No support No | Edge No support No | Firefox
Full support
32
| IE No support No | Opera Full support 15 | Safari Full support 7 | WebView Android No support No | Chrome Android ? | Edge Mobile ? | Firefox Android
Full support
32
| Opera Android No support No | Safari iOS Full support 7 | Samsung Internet Android No support No |
Support in DOM API such as in querySelector() and querySelectorAll() | Chrome Full support 27 | Edge No support No | Firefox Full support 32 | IE No support No | Opera Full support 15 | Safari Full support 7 | WebView Android Full support Yes | Chrome Android ? | Edge Mobile ? | Firefox Android Full support 32 | Opera Android No support No | Safari iOS Full support 7 | Samsung Internet Android ? |
Legend
- Full support
- Full support
- No support
- No support
- Compatibility unknown
- Compatibility unknown
- User must explicitly enable this feature.
- User must explicitly enable this feature.
See also
- The
:root
pseudo-class - Locating DOM elements using selectors
Element.querySelector()
andElement.querySelectorAll()
Document.querySelector()
andDocument.querySelectorAll()
DocumentFragment.querySelector()
andDocumentFragment.querySelectorAll()
ParentNode.querySelector()
andParentNode.querySelectorAll()