:scope

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

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(), querySelectorAll(), matches() o Element.closest(), :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() 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!
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é