---
title: ':scope'
slug: 'Web/CSS/:scope'
tags:
  - CSS
  - Experimental
  - Layout
  - Pseudo-class
  - Reference
  - Scoped Elements
  - Web
translation_of: 'Web/CSS/:scope'
---
<div>{{CSSRef}}</div>

<p>La <a href="/en/CSS/Pseudo-classes" title="Pseudo-classes">pseudo-class</a> de <a href="/en-US/docs/Web/CSS">CSS</a> <strong><code>:scope</code></strong> representa aquells elements que són un punt de referència per tal que els selectors coincideixin.</p>

<pre class="brush: css">/* <span class="short_text" id="result_box" lang="ca"><span class="alt-edited">Selecciona un element d'àmbit </span></span>*/
:scope {
  background-color: lime;
}</pre>

<p>Actualment, quan s'utilitza en un full d'estils, <code>:scope</code> és el mateix que {{cssxref(":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 {{domxref("Element.querySelector", "querySelector()")}}, {{domxref("Element.querySelectorAll", "querySelectorAll()")}}, {{domxref("Element.matches", "matches()")}} o {{domxref("Element.closest()")}}, <code>:scope</code> coincideix amb l'element que es va cridar el mètode.</p>

<h2 id="Sintaxi">Sintaxi</h2>

<pre class="syntaxbox language-html">{{csssyntax}}</pre>

<h2 id="Exemple">Exemple</h2>

<p>En aquest exemple senzill, demostrem que l'ús de la pseudo-class <code>:scope</code> del mètode {{domxref("Element.matches()")}} coincideix amb l'element del qual és cridat.</p>

<h3 id="JavaScript">JavaScript</h3>

<pre class="brush: js">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!";
}</pre>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;p id="para"&gt;
  This is a paragraph. It is not an interesting paragraph. Sorry about that.
&lt;/p&gt;
&lt;p id="output"&gt;&lt;/p&gt;</pre>

<h3 id="Resultat">Resultat</h3>

<div>{{ EmbedLiveSample('Example') }}</div>

<h2 id="Especificacions">Especificacions</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Especificació</th>
   <th scope="col">Estat</th>
   <th scope="col">Comentari</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{ SpecName('CSS4 Selectors', '#the-scope-pseudo', ':scope') }}</td>
   <td>{{ Spec2('CSS4 Selectors') }}</td>
   <td>Definició inicial.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browser_compatibility" name="Browser_compatibility">Navegadors compatibles</h2>

<p>{{ CompatibilityTable() }}</p>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Descripció</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>{{ CompatNo }}</td>
   <td>{{ CompatGeckoDesktop(20) }}<sup>[1]</sup></td>
   <td>{{CompatNo}}</td>
   <td>15</td>
   <td>7.0</td>
  </tr>
  <tr>
   <td>En <code>querySelector()</code> i <code>querySelectorAll()</code></td>
   <td>{{ CompatChrome(27) }}</td>
   <td>{{CompatGeckoDesktop(32)}}<sup>[1][2]</sup></td>
   <td>{{CompatNo}}</td>
   <td>15</td>
   <td>7.0</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Descripció</th>
   <th>Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>{{ CompatNo }}</td>
   <td>{{ CompatGeckoMobile(20) }}<sup>[1]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>7.0</td>
  </tr>
  <tr>
   <td>En <code>querySelector()</code> i <code>querySelectorAll()</code></td>
   <td>{{ CompatChrome(27) }}</td>
   <td>{{CompatGeckoMobile(32)}}<sup>[1][2]</sup></td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>7.0</td>
  </tr>
 </tbody>
</table>
</div>

<p>[2] Firefox 20 implementa la pseudo-class <code>:scope</code>, la funció està desactivada per defecte. Per habilitar la funció, estableix la preferència <code>layout.css.scope-pseudo.enabled</code> a <code>true</code>. A partir de Firefox 32, aquest indicador està per defecte a <code>true</code> en les versions de llançament de Firefox ({{bug(528456)}}).</p>

<p>[3] Gecko 55 (Firefox 55) elimina el suport per a <code>&lt;style scoped&gt;</code> però <em>no</em> per a la pseudo-class <code>:scope</code>, que encara és compatible. <code>&lt;style scoped&gt;</code> 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.</p>

<h2 id="Vegeu_també">Vegeu també</h2>

<ul>
 <li>La <a href="/en-US/docs/Web/CSS/Pseudo-classes" title="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-class</a> {{cssxref(":root")}}</li>
</ul>