`:scope` - CSS Selector

:scope

Summary of characteristics of the `:scope` selector

Quick description

Targets the current element. Useful inside an @scope directive.

Status

Standard

W3C Module

Selectors

References (W3C)

Selectors Level 4

Document status: WD (Working Draft)

Description of the `:scope` pseudo-class.

Used in a @scope at-rule, the :scope pseudo-class targets the root element defined by @scope. Outside of a @scope at-rule, the :scope pseudo-class targets the root of the HTML document, so it's equivalent to :root. This pseudo-class is especially useful in a at-rule because it lets you target the element designated by the @scope at-rule.

Example. The at-rule @scope targets the element with the ID intro. We apply styles to the h2 headings inside this intro, and we also apply styles to the intro itself using the selector :scope.


	@scope (#intro) {
	   h2 { ... }
	   :scope { ... }
	}

In the case of nested @scope at-rules, :scope always refers to the root of the innermost at-rule relative to the position of :scope.
In the example below, the first :scope targets the example1 section, while the second :scope targets the images contained in that section.

Exemple pour :scope

The specificity of :scope is 10 like all the other pseudo-classes, regardless of the selector specified by @scope.

Also see the @scope at-rule for more information. And also check out the page on &, which is a selector that looks like :scope but has some differences, especially in terms of specificity.

Using `:scope` in JavaScript.

Like all other selectors, the pseudo-class :scope can be used with the Javascript methods querySelector() and querySelectorAll().

Here’s, for example, a function that applies a border to all the images in the paragraph you click on. The targeting of the images uses a selector that involves the pseudo-class :scope.


	function entourerImg(el) {
		var images = el.querySelectorAll(':scope > img');
		images.forEach((img) => {
			img.style.outline="1px solid red";
		});
	}

Browser compatibility with `:scope`.

The pseudo-class :scope has long been well recognized by browsers, but it has become interesting since browsers are able to nest CSS code (@scope at-rule).

Column 1

Recognition by browsers of the @scope at-rule that limits the scope of the rules it contains.

Column 2

Recognition by browsers of the pseudo-class :scope which targets the current element (see directive @scope).

@scope
at-rule

:scope
pseudo-class

Estimated overall support.

84%

95%

Browsers on computers :

Mobile browsers :

Outdated or marginal browsers :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

QQ Browser

Baidu Browser

Samsung Internet

Chrome

Edge

Chrome pour Androïd

Androïd Brower

Firefox pour Androïd

Opéra

Safari sur IOS

Safari

Firefox

KaiOS Browser

Opéra mini

See Caniuse.com for more compatibility information.

Caniuse

Historic of the `:scope` pseudo-class.

Selectors Level 4

This specification module defines new selectors that can be used in CSS.

Regarding :scope Description of the pseudo-class :scope to target the current element.
Information can also be found in the specification Cascading and inheritance.

September 29, 2011
Working Draft.

See also...

To complete your information, also refer to the description of the selectors below. If you want to check the W3C specification, look for the module named Selectors .

:empty

Pseudo-class targeting elements without content.

:first-child

Pseudo-class targeting the first child of an element, in the document order.

:first-of-type

Pseudo-class targeting the first elements of each type, in the order of the document.

:last-child

Pseudo-class targeting the last child of an element in the document order.

:last-of-type

Pseudo-class targeting the last elements of each type in the document order.

:nth-child()