files/ca/web/css/css_selectors/index.html


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
147
148
149
150
151
152
153
154
155
156

---
title: Selectors CSS
slug: Web/CSS/Selectors_CSS
tags:
  - CSS
  - CSS Selectors
  - Overview
  - Reference
  - Selectors
translation_of: Web/CSS/CSS_Selectors
---
<div>{{CSSRef}}</div>

<p>Els<strong> Selectors</strong> <strong>CSS</strong> <span id="result_box" lang="ca"><span>defineixen els elements als quals s'aplica un conjunt de normes CSS.</span></span></p>

<h2 id="Selectors_Bàsics">Selectors Bàsics</h2>

<dl>
 <dt><a href="/en-US/docs/Web/CSS/Type_selectors">Selector de tipus</a></dt>
 <dd>Selecciona tots els elements que coincideixen amb el nom del node donat.<br>
 <strong>Sintaxi:</strong> <code><var>eltname</var></code><br>
 <strong>Exemple:</strong> <code>input</code> coincidirà amb qualsevol element {{HTMLElement('input')}}</dd>
 <dt><a href="/en-US/docs/Web/CSS/Class_selectors">Selector de clase </a></dt>
 <dd>Selecciona tots els elements que tenen l'atribut <code>class</code> donat.<br>
 <strong>Sintaxi:</strong> <code>.<var>classname</var></code><br>
 <strong>Exemple:</strong> <code>.index</code> coincidirà amb qualsevol element que tingui una classe "index"</dd>
 <dt><a href="/en-US/docs/Web/CSS/ID_selectors">Selector de ID</a></dt>
 <dd>Selecciona un element basat en el valor del seu atribut <code>id</code>. Només hi ha d'haver un element amb una ID determinat en un document.<br>
 <strong>Sintaxi:</strong> <code>#<var>idname</var></code><br>
 <strong>Exemple:</strong> <code>#toc</code> <span id="result_box" lang="ca"><span>coincidiran amb l'element que té</span></span> l'ID "toc".</dd>
 <dt><a href="/en-US/docs/Web/CSS/Universal_selectors">Selector universal</a></dt>
 <dd><span id="result_box" lang="ca"><span>Selecciona tots els elements.</span> <span>De manera opcional, pot estar restringit a un espai de noms específic o a tots els espais de noms.</span></span><br>
 <strong>Sintaxi:</strong> <code>*</code> <code>ns|*</code> <code>*|*</code><br>
 <strong>Exemple:</strong> <code>*</code> <span id="result_box" lang="ca"><span>coincideix amb tots els elements del document.</span></span></dd>
 <dt><a href="/en-US/docs/Web/CSS/Attribute_selectors">Selector d'atribut</a></dt>
 <dd><span id="result_box" lang="ca"><span>Selecciona elements basats en el valor de l'atribut donat</span></span>.<br>
 <strong>Sintaxi:</strong> <code>[attr]</code> <code>[attr=value]</code> <code>[attr~=value]</code> <code>[attr|=value]</code> <code>[attr^=value]</code> <code>[attr$=value]</code> <code>[attr*=value]</code><br>
 <strong>Exemple:</strong> <code>[autoplay]</code> <span id="result_box" lang="ca"><span>coincidiran tots els elements que tenen establert l'atribut</span></span> <code>autoplay</code> (<span id="result_box" lang="ca"><span>a qualsevol valor</span></span>).</dd>
</dl>

<h2 id="Combinadors">Combinadors</h2>

<dl>
 <dt><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Adjacent_sibling_selectors">Combinador de germans adjacents</a></dt>
 <dd>El combinador <code>+</code> selecciona els germans adjacents. Això significa que el segon element segueix directament el primer, i ambdós comparteixen el mateix pare.<br>
 <strong>Sintaxi:</strong> <code><var>A</var> + <var>B</var></code><br>
 <strong>Exemple:</strong> <code>h2 + p</code> coincidirà amb tots el elements {{HTMLElement('p')}} que segueixen directament un {{HTMLElement('h2')}}.</dd>
 <dt><a href="/en-US/docs/Web/CSS/General_sibling_selectors">Combinador general de germans</a></dt>
 <dd>El combinador <code>~</code> selecciona els germans. Això significa que el segon element segueix el primer (encara que no necessàriament de forma immediata), i tots dos comparteixen el mateix pare.<br>
 <strong>Sintaxi:</strong> <code><var>A</var> ~ <var>B</var></code><br>
 <strong>Exemple:</strong> <code>p ~ span</code> coincidirà amb tots els elements {{HTMLElement('span')}} que segueixen un {{HTMLElement('p')}}.</dd>
 <dt><a href="/en-US/docs/Web/CSS/Child_selectors">Combinador de fills</a></dt>
 <dd>El combinador <code>&gt;</code> selecciona els nodes que són fills directes del primer element.<br>
 <strong>Sintaxi:</strong> <code><var>A</var> &gt; <var>B</var></code><br>
 <strong>Exemple:</strong> <code>ul &gt; li</code> coincidirà amb tots els elements {{HTMLElement('li')}} que estan niats directament dins d'un element {{HTMLElement('ul')}}.</dd>
 <dt><a href="/en-US/docs/Web/CSS/Descendant_selectors">Combinador de descendents</a></dt>
 <dd>El combinador <code>  </code> selecciona els nodes que són descendents del primer element.<br>
 <strong>Sintaxi:</strong> <code>A B</code><br>
 <strong>Exemple:</strong> <code>div span</code> coincidirà amb tots els elements {{HTMLElement('span')}} que es troben dins d'un element {{HTMLElement('div')}}.</dd>
</dl>

<h2 id="Pseudo-classes">Pseudo-classes</h2>

<p><a href="/en-US/docs/Web/CSS/Pseudo-classes">Pseudo-classes</a> <span id="result_box" lang="ca"><span>permeten la selecció d'elements basats en informació d'estat que no es troba a l'arbre del document.</span></span></p>

<p><strong>Exemple:</strong> <code>a:visited</code> <span id="result_box" lang="ca"><span>coincidirà amb tots els elements</span></span> {{HTMLElement('a')}} <span id="result_box" lang="ca"><span>que hagi visitat l'usuari</span></span>.</p>

<h2 id="Pseudo-elements">Pseudo-elements</h2>

<p><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo-elements</a> <span id="result_box" lang="ca"><span>representen entitats que no estan incloses en HTML.</span></span></p>

<p><strong>Exemple:</strong> <code>p::first-line</code> <span id="result_box" lang="ca"><span>coincidirà amb la primera línia de tots els elements</span></span> {{HTMLElement('p')}}.</p>

<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')}}</td>
   <td>{{Spec2('CSS4 Selectors')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Selectors')}}</td>
   <td>{{Spec2('CSS3 Selectors')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'selector.html')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td></td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1')}}</td>
   <td>{{Spec2('CSS1')}}</td>
   <td>Definició inicial</td>
  </tr>
 </tbody>
</table>

<h2 id="Navegadors_compatibles">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>1</td>
   <td>{{CompatGeckoDesktop("1")}}</td>
   <td>3.0</td>
   <td>3.5</td>
   <td>1.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>1.5</td>
   <td>{{CompatGeckoMobile("1.9.2")}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>3.2</td>
  </tr>
 </tbody>
</table>
</div>