:scope

The pseudo-class CSS :scope representan elements que són un punt de referència per a que els selectors coincideixin.

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

Actualment, quan s'utilitza en un fulla d'estils, :scope és el mateix que :root, ja que no hi ha en aquest moment una manera d'establir explícitament un element amb àmbit. Quan s'utilitza des d'una API DOM com querySelector(), querySelectorAll(), matches() o Element.closest(), :scope coincideix amb l'element al que 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() coincideix amb l'element del qual es 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

Navegadors compatibles

[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é

• La pseudo-class :root