This translation is incomplete. Please help translate this article from English.

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

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!

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é

Document Tags and Contributors

Contributors to this page: Legioinvicta
Last updated by: Legioinvicta,