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
| 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.