Nossos voluntários ainda não traduziram este artigo para o Português (do Brasil). Junte-se a nós e ajude-nos a fazer o trabalho!
Você também pode ler o artigo em 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

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome No support NoEdge No support NoFirefox Full support 32
Full support 32
Full support 20
Disabled
Disabled From version 20: this feature is behind the layout.css.scope-pseudo.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
IE No support NoOpera Full support 15Safari Full support 7WebView Android No support NoChrome Android ? Edge Mobile ? Firefox Android Full support 32
Full support 32
Full support 20
Disabled
Disabled From version 20: this feature is behind the layout.css.scope-pseudo.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config.
Opera Android No support NoSafari iOS Full support 7Samsung Internet Android No support No
Support in DOM API such as in querySelector() and querySelectorAll()Chrome Full support 27Edge No support NoFirefox Full support 32IE No support NoOpera Full support 15Safari Full support 7WebView Android Full support YesChrome Android ? Edge Mobile ? Firefox Android Full support 32Opera Android No support NoSafari iOS Full support 7Samsung 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

Etiquetas do documento e colaboradores

Última atualização por: mfuji09,