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
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
|
---
title: Referéncia CSS
slug: Web/CSS/Reference
tags:
- CSS
- Reference
- l10n:priority
translation_of: Web/CSS/Reference
original_slug: Web/CSS/Referéncia_CSS
---
<p class="summary"><span id="result_box" lang="ca"><span>Utilitzeu aquesta referència CSS per explorar un</span></span> <a href="#Keyword_index">índex alfabètic</a> <span id="result_box" lang="ca"><span>de totes les propietats</span></span> <a href="/en-US/docs/Web/CSS">CSS</a> <span id="result_box" lang="ca"><span>estàndard</span></span> , <a href="/en-US/docs/Web/CSS/Pseudo-classes">pseudo-classes</a>, <a href="/en-US/docs/Web/CSS/Pseudo-elements">pseudo-elements</a>, <a href="/en-US/docs/Web/CSS/CSS_Types">tipus de dades</a>, i <a href="/en-US/docs/Web/CSS/At-rule">regles-at</a>. <span id="result_box" lang="ca"><span>També podeu explorar una llista de tots els </span></span> <a href="#Selectors">selectors CSS organitzats per tipus</a> i una llista de <a href="#Concepts">conceptes clau CSS</a>. <span id="result_box" lang="ca"><span>També s'inclou una breu</span></span> <a href="#DOM-CSS_CSSOM">referència DOM-CSS / CSSOM</a>.</p>
<h2 id="Sintaxi_de_regla_bàsica"><span class="short_text" id="result_box" lang="ca"><span>Sintaxi de regla bàsica</span></span></h2>
<h3 id="Sintaxi_de_regla_d'estil"><span class="short_text" id="result_box" lang="ca"><span>Sintaxi de regla d'estil</span></span></h3>
<pre class="syntaxbox"><strong><var>selectorlist</var> {
<var>property</var>: <var>value</var>;</strong>
<var>[more property:value; pairs]</var>
<strong>}</strong>
... where <var>selectorlist</var> is: <var>selector[:pseudo-class] [::pseudo-element] [, more selectorlists]</var>
See <a href="#Selectors"><em>selector</em></a>, <a href="#pcls"><em>pseudo-class</em></a>, <em><a href="#pelm">pseudo-element</a></em> lists below.
</pre>
<h4 id="Exemples_de_regla_d'estil"><span id="result_box" lang="ca"><span>Exemples de regla d'estil</span></span></h4>
<pre class="brush: css">strong {
color: red;
}
div.menu-bar li:hover > ul {
display: block;
}
</pre>
<p>Per a una introducció a nivell de principiant a la sintaxi de selectors CSS, consulteu <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors">aquest tutorial</a>. Tingueu en compte que qualsevol error de <a href="/en-US/docs/Web/CSS/syntax">sintaxi CSS</a> en una definició de regla invalida tota la regla. Les regles no vàlides són ignorades pel navegador. Tingueu en compte que les definicions de la regla CSS són totalment <a href="https://www.w3.org/TR/css-syntax-3/#intro">basades en text</a> (ASCII), mentre que DOM-CSS / CSSOM (el sistema de gestió de regles) està <a href="https://www.w3.org/TR/cssom/#introduction">basat en objectes</a>.</p>
<h3 id="Sintaxi_de_regla-At_(At-rule)">Sintaxi de regla-At (At-rule)</h3>
<p>As the structure of at-rules varies widely, please see <a href="/en-US/docs/Web/CSS/At-rule">At-rule</a> to find the syntax of the specific one you want.</p>
<h2 id="Índex_de_paraules_clau_(Keyword)"><span class="short_text" id="result_box" lang="ca"><span>Índex de paraules clau</span></span> (Keyword)</h2>
<div>{{CSS_Ref}}</div>
<h2 id="Selectors">Selectors</h2>
<h3 id="Selectors_Bàsics"><a href="/en-US/docs/Web/CSS/CSS_Selectors#Basic_selectors">Selectors Bàsics</a></h3>
<ul>
<li><a href="/en-US/docs/Web/CSS/Type_selectors">Selector de Tipus</a> <code>elementname</code></li>
<li><a href="/en-US/docs/Web/CSS/Class_selectors">Selector Class</a> <code>.classname</code></li>
<li><a href="/en-US/docs/Web/CSS/ID_selectors">Selector ID</a> <code>#idname</code></li>
<li><a href="/en-US/docs/Web/CSS/Universal_selectors">Selector Universal</a> <code>*</code> <code>ns|*</code> <code>*|*</code></li>
<li><a href="/en-US/docs/Web/CSS/Attribute_selectors">Selector d'Attribute</a> <code>[attr=value]</code></li>
</ul>
<h3 id="Combinadors"><a href="/en-US/docs/Web/CSS/CSS_Selectors#Combinators">Combinadors</a></h3>
<ul>
<li><a href="/en-US/docs/Web/CSS/Adjacent_sibling_selectors">Combinador de germans Adjacents</a> <code>A + B</code></li>
<li><a href="/en-US/docs/Web/CSS/General_sibling_selectors">Combinador de germans General</a> <code>A ~ B</code></li>
<li><a href="/en-US/docs/Web/CSS/Child_selectors">Combinador de Fills</a> <code>A > B</code></li>
<li><a href="/en-US/docs/Web/CSS/Descendant_selectors">Combinador de Descendents</a> <code>A B</code></li>
</ul>
<h3 id="Pseudo-classes"><a href="/en-US/docs/Web/CSS/Pseudo-classes">Pseudo-classes</a></h3>
<div class="index">
<ul>
<li id="pcls">{{ Cssxref(":active") }}</li>
<li>{{cssxref(':any')}}</li>
<li>{{cssxref(':any-link')}}</li>
<li>{{ Cssxref(":checked") }}</li>
<li>{{ Cssxref(":default") }}</li>
<li>{{ Cssxref(":dir", ":dir()")}}</li>
<li>{{ Cssxref(":disabled") }}</li>
<li>{{ Cssxref(":empty") }}</li>
<li>{{ Cssxref(":enabled") }}</li>
<li>{{ Cssxref(":first") }}</li>
<li>{{ Cssxref(":first-child") }}</li>
<li>{{ Cssxref(":first-of-type") }}</li>
<li>{{ Cssxref(":fullscreen") }}</li>
<li>{{ Cssxref(":focus") }}</li>
<li>{{ Cssxref(":hover") }}</li>
<li>{{ Cssxref(":indeterminate") }}</li>
<li>{{ Cssxref(":in-range") }}</li>
<li>{{ Cssxref(":invalid") }}</li>
<li>{{ Cssxref(":lang", ":lang()") }}</li>
<li>{{ Cssxref(":last-child") }}</li>
<li>{{ Cssxref(":last-of-type") }}</li>
<li>{{ Cssxref(":left") }}</li>
<li>{{ Cssxref(":link") }}</li>
<li>{{ Cssxref(":not", ":not()") }}</li>
<li>{{ Cssxref(":nth-child", ":nth-child()") }}</li>
<li>{{ Cssxref(":nth-last-child", ":nth-last-child()") }}</li>
<li>{{ Cssxref(":nth-last-of-type", ":nth-last-of-type()") }}</li>
<li>{{ Cssxref(":nth-of-type", ":nth-of-type()") }}</li>
<li>{{ Cssxref(":only-child") }}</li>
<li>{{ Cssxref(":only-of-type") }}</li>
<li>{{ Cssxref(":optional") }}</li>
<li>{{ Cssxref(":out-of-range") }}</li>
<li>{{ Cssxref(":read-only") }}</li>
<li>{{ Cssxref(":read-write") }}</li>
<li>{{ Cssxref(":required") }}</li>
<li>{{ Cssxref(":right") }}</li>
<li>{{ Cssxref(":root") }}</li>
<li>{{ Cssxref(":scope") }}</li>
<li>{{ Cssxref(":target") }}</li>
<li>{{ Cssxref(":valid") }}</li>
<li>{{ Cssxref(":visited") }}</li>
</ul>
</div>
<h3 id="Pseudo-elements"><a href="/en-US/docs/Web/CSS/Pseudo-elements">Pseudo-elements</a></h3>
<div class="index">
<ul>
<li id="pelm">{{ Cssxref("::after") }}</li>
<li>{{ Cssxref("::backdrop") }}</li>
<li>{{ Cssxref("::before") }}</li>
<li>{{ Cssxref("::cue") }}</li>
<li>{{ Cssxref("::first-letter") }}</li>
<li>{{ Cssxref("::first-line") }}</li>
<li>{{ Cssxref("::grammar-error") }} {{experimental_inline}}</li>
<li>{{ Cssxref("::marker") }} {{experimental_inline}}</li>
<li>{{ Cssxref("::placeholder") }} {{experimental_inline}}</li>
<li>{{ Cssxref("::selection") }}</li>
<li>{{ Cssxref("::spelling-error") }} {{experimental_inline}}</li>
</ul>
</div>
<div class="note">
<p><strong>Vegeu també:</strong> Una <a href="https://www.w3.org/TR/selectors/#selectors">llista completa de selectors</a> en l'especificació Selectors Level 3.</p>
</div>
<h2 id="Conceptes">Conceptes</h2>
<h3 id="Sintaxi_i_semàntica"><span class="short_text" id="result_box" lang="ca"><span>Sintaxi i semàntica</span></span></h3>
<ul>
<li><a href="/en-US/docs/Web/CSS/Syntax">Sintaxi CSS</a></li>
<li><a href="/en-US/docs/Web/CSS/At-rule">Regles-At</a></li>
<li><a href="/en-US/docs/Web/CSS/Cascade">Cascada</a></li>
<li><a href="/en-US/docs/Web/CSS/Comments">Comentaris</a></li>
<li><a href="/en-US/docs/Glossary/Descriptor_(CSS)">Descriptor</a></li>
<li><a href="/en-US/docs/Web/CSS/inheritance">Herència</a></li>
<li><a href="/en-US/docs/Web/CSS/Shorthand_properties">Propietats abreujades</a></li>
<li><a href="/en-US/docs/Web/CSS/Specificity">Especificitat</a></li>
<li><a href="/en-US/docs/Web/CSS/Value_definition_syntax">Sintaxi de definció de valor</a></li>
</ul>
<h3 id="Valors">Valors</h3>
<ul>
<li><a href="/en-US/docs/Web/CSS/actual_value">Valor Real</a></li>
<li><a href="/en-US/docs/Web/CSS/computed_value">Valor Calculat</a></li>
<li><a href="/en-US/docs/Web/CSS/initial_value">Valor Inicial</a></li>
<li><a href="/en-US/docs/Web/CSS/resolved_value">Valor Resolt</a></li>
<li><a href="/en-US/docs/Web/CSS/specified_value">Valor Especificat</a></li>
<li><a href="/en-US/docs/Web/CSS/used_value">Valor Usat</a></li>
</ul>
<h3 id="Disseny">Disseny</h3>
<ul>
<li><a href="/en-US/docs/Web/Guide/CSS/Block_formatting_context">Context de format de bloc</a></li>
<li><a href="/en-US/docs/Web/CSS/box_model">Model Caixa</a></li>
<li><a href="/en-US/docs/Web/CSS/All_About_The_Containing_Block">Bloc contenidor</a></li>
<li><a href="/en-US/docs/Web/CSS/Layout_mode">Mode de presentació</a></li>
<li><a href="/en-US/docs/Web/CSS/CSS_Box_Model/Mastering_margin_collapsing">Col.lapsant el Marge</a></li>
<li><a href="/en-US/docs/Web/CSS/Replaced_element">Elements Reemplaçats</a></li>
<li><a href="/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context">Context d'Apilament</a></li>
<li><a href="/en-US/docs/Web/Guide/CSS/Visual_formatting_model">Model de format Visual</a></li>
</ul>
<h2 id="DOM-CSS_CSSOM">DOM-CSS / CSSOM</h2>
<h3 id="Tipus_d'objectes_principals"><span class="short_text" id="result_box" lang="ca"><span>Tipus d'objectes principals</span></span></h3>
<ul>
<li>document.<a href="/en-US/docs/Web/API/Document/styleSheets">styleSheets</a></li>
<li>styleSheets[i].<a href="/en-US/docs/Web/API/CSSRuleList">cssRules</a></li>
<li>cssRules[i].<a href="/en-US/docs/Web/API/CSSRule/cssText">cssText</a> (selector & style)</li>
<li>cssRules[i].<a href="/en-US/docs/Web/API/CSSStyleRule/selectorText">selectorText</a></li>
<li>elem.<a href="/en-US/docs/Web/API/HTMLElement/style">style</a></li>
<li>elem.style.<a href="/en-US/docs/Web/API/CSSStyleDeclaration/cssText">cssText</a> (just style)</li>
<li>elem.<a href="/en-US/docs/Web/API/Element/className">className</a></li>
<li>elem.<a href="/en-US/docs/Web/API/Element/classList">classList</a></li>
</ul>
<h3 id="Mètodes_importants"><span class="short_text" id="result_box" lang="ca"><span>Mètodes importants</span></span></h3>
<ul>
<li>{{domxref("CSSStyleSheet.insertRule")}}</li>
<li>{{domxref("CSSStyleSheet.deleteRule")}}</li>
</ul>
<h2 id="Vegeu_també"><span class="short_text" id="result_box" lang="ca"><span>Vegeu també</span></span></h2>
<ul>
<li><a href="/en-US/docs/Web/CSS/Mozilla_Extensions">Mozilla CSS extensions</a> (prefixades amb <code>-moz</code>)</li>
<li><a href="/en-US/docs/Web/CSS/Webkit_Extensions">WebKit CSS extensions</a> ( <span id="result_box" lang="ca"><span>majoritàriament prefixades amb</span></span> <code>-webkit</code>)</li>
<li><a href="/en-US/docs/Web/CSS/Microsoft_CSS_extensions">Microsoft CSS extensions</a> (prefixades amb <code>-ms</code>)</li>
</ul>
|
