---
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 &gt; 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 &gt; 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 &amp; 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>