:scope

La pseudo-class de CSS :scope representa aquells elements que són un punt de referència per tal que els selectors coincideixin.

/* Selecciona un element d'àmbit */
:scope {
  background-color: lime;
}

Actualment, quan s'utilitza en un full d'estils, :scope és el mateix que :root, ja que, en aquest moment, no hi ha una manera d'establir explícitament un element amb àmbit. Quan s'utilitza des d'una API DOM com querySelector() (en-US), querySelectorAll() (en-US), matches() (en-US) o Element.closest() (en-US), :scope coincideix amb l'element que es va cridar el mètode.

Sintaxi

:scope

Exemple

En aquest exemple senzill, demostrem que l'ús de la pseudo-class :scope del mètode Element.matches() (en-US) coincideix amb l'element del qual és cridat.

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>

Resultat

Especificacions

Especificació Estat Comentari
Selectors Level 4
The definition of ':scope' in that specification.		 Working Draft Definició inicial.

Navegadors compatibles

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help! (en-US)

Descripció Chrome Firefox (Gecko) Internet Explorer Opera Safari
Suport bàsic No support 20 (20)[1] No support 15 7.0
En querySelector() i querySelectorAll() 27 32 (32)[1][2] No support 15 7.0
Descripció Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suport bàsic No support 20.0 (20)[1] No support No support 7.0
En querySelector() i querySelectorAll() 27 32.0 (32)[1][2] No support No support 7.0

[2] Firefox 20 implementa la pseudo-class :scope, la funció està desactivada per defecte. Per habilitar la funció, estableix la preferència layout.css.scope-pseudo.enabled a true. A partir de Firefox 32, aquest indicador està per defecte a true en les versions de llançament de Firefox (errada 528456).

[3] Gecko 55 (Firefox 55) elimina el suport per a <style scoped> però no per a la pseudo-class :scope, que encara és compatible. <style scoped> va fer possible configurar explícitament els àmbits de l'element, però les discussions en curs sobre el disseny d'aquesta característica, així com la manca d'altres implementacions, van donar com a resultat la decisió d'eliminar-lo.

Vegeu també