1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
|
---
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"><p id="para">
This is a paragraph. It is not an interesting paragraph. Sorry about that.
</p>
<p id="output"></p></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><style scoped></code> però <em>no</em> per a la pseudo-class <code>:scope</code>, que encara és compatible. <code><style scoped></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>
|
