files/ca/web/css/selectors_de_classe/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

---
title: Selector Class
slug: Web/CSS/Selectors_de_Classe
tags:
  - CSS
  - Reference
  - Selectors
translation_of: Web/CSS/Class_selectors
---
<div>{{CSSRef}}</div>

<p>El <strong>selector class </strong> CSS <span id="result_box" lang="ca"><span>coincideix amb elements basats en el contingut de l'atribut</span></span> {{htmlattrxref("class")}}.</p>

<pre class="brush: css no-line-numbers">/* Tots els elements amb class="spacious" */
.spacious {
  margin: 2em;
}

/* Tots els elements &lt;li&gt; amb class="spacious" */
li.spacious {
  margin: 2em;
}</pre>

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

<pre class="syntaxbox">.classname { <em>style properties</em> }</pre>

<p><span id="result_box" lang="ca"><span>Recordeu que</span> <span>això és</span> <span>equivalent al</span> <span>següent</span></span> {{Cssxref("Attribute_selectors", "attribute selector")}}:</p>

<pre class="syntaxbox">[class~=classname] { <em>style properties</em> }</pre>

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

<h3 id="CSS">CSS</h3>

<pre class="brush: css">div.classy {
  background-color: skyblue;
}
</pre>

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

<pre class="brush: html">&lt;div class="classy"&gt;This div has a special class on it!&lt;/div&gt;
&lt;div&gt;This is just a regular div.&lt;/div&gt;
</pre>

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

<p>{{EmbedLiveSample('Example', '100%', 50)}}</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', '#class-html', 'class selectors')}}</td>
   <td>{{Spec2('CSS4 Selectors')}}</td>
   <td>Sense canvis</td>
  </tr>
  <tr>
   <td>{{SpecName('CSS3 Selectors', '#class-html', 'class selectors')}}</td>
   <td>{{Spec2('CSS3 Selectors')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('CSS2.1', 'selector.html#class-html', 'child selectors')}}</td>
   <td>{{Spec2('CSS2.1')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('CSS1', '#class-as-selector', 'child selectors')}}</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>Edge</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Suport bàsic</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Descripció</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Edge</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>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatVersionUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>