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