path: root/files/ca/conflicting/learn/css/building_blocks/selectors/index.html

---
title: Selectors
slug: conflicting/Learn/CSS/Building_blocks/Selectors
tags:
  - Beginner
  - CSS
  - CSS Selector
  - CSS:Getting_Started
  - Example
  - Guide
  - NeedsBeginnerUpdate
  - NeedsLiveSample
  - NeedsUpdate
  - Web
translation_of: Learn/CSS/Building_blocks/Selectors
translation_of_original: Web/Guide/CSS/Getting_started/Selectors
original_slug: Web/Guide/CSS/Inici_en_CSS/Selectors
---
<p>{{ CSSTutorialTOC() }}</p>

<p>{{ previousPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Cascading_and_inheritance", "Cascada &amp; herència")}}Aquesta 5th secció del tutorial <a href="https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_Started">CSS Getting Started</a>; s'explica com es poden aplicar estils de forma selectiva, i com els diferents tipus de selectors tenen diferents prioritats. Afegir alguns atributs a les etiquetes en el document d'exemple, i utilitzar aquests atributs en el full d'estils d'exemple.</p>

<h2 class="clearLeft" id="Informació_Selectors">Informació: Selectors</h2>

<p>CSS té la seva pròpia terminologia per descriure el llenguatge CSS. Anteriorment en aquest tutorial, heu creat una línia al full d'estils com aquesta:</p>

<pre class="brush: css">strong {
  color: red;
}
</pre>

<p>En la terminologia de CSS, tota aquesta línia és una <em>regla</em>. Aquesta regla s'inicia amb strong, que és un <em>selector</em> (o una llista de <em>selectors</em>). Es selecciona quins elements del DOM s'aplica la regla.</p>

<div class="tuto_details">
<div class="tuto_type">Més detalls</div>

<p>La part dins de les claus és la <em>declaració</em>.</p>

<p>L'identificador color és una <em>propietat</em>, i el vermell és un <em>valor</em>.</p>

<p>El punt i coma després del parell propietat-valor fa de separació d'altres parells propietat-valor en la mateixa declaració.</p>

<p>En aquest tutorial es refereix a un selector com strong com un selector d'etiquetes. L'especificació CSS es refereix a ell com un selector de <em>tipus</em>.</p>
</div>

<p>Aquesta pàgina del tutorial explica més sobre els selectors que es poden utilitzar en les regles CSS.</p>

<p>A més dels noms de les etiquetes, podeu utilitzar els valors dels atributs en els selectors. Això permet que les regles siguin més específiques.</p>

<p>Dos atributs tenen un estatus especial per CSS. Són <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> i <a href="/en-US/docs/Web/HTML/Global_attributes#id" title="en-US/docs/Web/HTML/Global_attributes#id"><code>id</code></a>.</p>

<h3 id="Selectors_class">Selectors class</h3>

<p>Utilitzeu l'atribut <a href="/en-US/docs/Web/HTML/Global_attributes#attr-class" title="en-US/docs/Web/HTML/Global_attributes#attr-class"><code>class</code></a> en un element per assignar l'element un nom de classe. Depèn de vosaltres el nom que trieu per a la classe. Múltiples elements d'un document poden tenir el mateix valor de classe.</p>

<p>En el full d'estil, escriviu un punt (. punt) abans del nom de la classe, quan s'utilitza en un selector.</p>

<h3 id="Selectors_ID">Selectors ID</h3>

<p>Utilitzeu l'atribut <a href="/en-US/docs/Web/HTML/Global_attributes#id" title="en-US/docs/Web/HTML/Global_attributes#id"><code>id</code></a> en un element per assignar un identificador a l'element. Depèn de vosaltres el nom que trieu per a l'identificador. El nom de l'identificador ha de ser únic en el document.</p>

<p>En el full d'estil, escriviu un signe (# hash) abans de l'identificador quan s'utilitza en un selector.</p>

<div class="tuto_example">
<div class="tuto_type">Exemple</div>
Aquesta etiqueta HTML té tant un atribut <code>class</code> com un atribut <code>id</code>:

<pre class="brush: html">&lt;p class="key" id="principal"&gt;
</pre>

<p>El valor <strong>id</strong>, <code>principal</code>, ha de ser únic en el document, però altres etiquetes en el document poden tenir el mateix nom de la class, <code>key</code>.</p>

<p>En un full d'estil CSS, aquesta regla fa que tots els elements amb la class <code>key</code> siguin verds. (Pot ser que no tots siguin elements {{ HTMLElement("p") }}.)</p>

<pre class="brush: css">.key {
  color: green;
}
</pre>

<p>Aquesta regla fa que l'únic element amb el <strong>id</strong> <code>principal</code> sigui negreta:</p>

<pre class="brush: css">#principal {
  font-weight: bolder;
}
</pre>
</div>

<h3 id="Selectors_d'atributs"><span class="short_text" id="result_box" lang="ca"><span>Selectors</span> <span>d'atributs</span></span></h3>

<p>No està limitat als dos atributs especials, <code>class</code> i <code>id</code>. Podeu especificar <a href="/en-US/docs/Web/CSS/Attribute_selectors" title="/en-US/docs/Web/CSS/Attribute selectors">altres atributs</a> mitjançant claudàtors. Dins dels claudàtors es posa el nom de l'atribut, opcionalment seguit d'un operador coincident i un valor. A més, es pot fer entre majúscules i minúscules afegint una "i" després del valor, però no molts navegadors són compatibles amb aquesta funció fins al moment. Exemples:</p>

<dl>
 <dt><code>[disabled]</code></dt>
 <dd>Selecciona tots els elements amb un atribut "disabled".</dd>
 <dt><code>[type='button']</code></dt>
 <dd>Selecciona els elements amb un tipus "button".</dd>
 <dt><code>[class~=key]</code></dt>
 <dd>Selecciona elements amb la class "key" (però no, per exemple, "keyed", "monkey", "buckeye"). Funcionalment equivalent a <code>.key</code>.</dd>
 <dt><code>[lang|=es]</code></dt>
 <dd>Selecciona els elements especificats com espanyol. Això inclou "es" i "es-MX", però no "eu-ES" (que és basca).</dd>
 <dt>[title*="example" i]</dt>
 <dd>Selecciona elements title els quals conté "example", <span id="result_box" lang="ca"><span>ignorant</span> <span>majúscules i</span> <span>minúscules</span></span> . En els navegadors que no admeten l'indicador "i", aquest selector probablement no coincidirà amb cap element.</dd>
 <dt><code>a[href^="https://"]</code></dt>
 <dd>Especifica com ha de començar el valor de l'atribut; en aquest cas, es selecciona enllaços segurs.</dd>
 <dt><code>img[src$=".png"]</code></dt>
 <dd>Selecciona elements el valor dels quals finalitza amb la cadena proporcionada. Indirectament selecciona imatges PNG; les imatges són PNGs però la URL de les quals no acabi en ".png" no seràn seleccionades (e.g. `src="some-image.png?_=cachebusterhash"`).</dd>
</dl>

<h3 id="Selectors_de_pseudo-classes">Selectors de pseudo-classes</h3>

<p>Un pseudo-classe CSS és una paraula clau afegida als selectors que especifica un estat especial de l'element a seleccionar. Per exemple {{ Cssxref(":hover") }} aplicarà un estil quan l'usuari es desplaci sobre l'element especificat pel selector.</p>

<p>Les pseudo-classes, juntament amb els pseudo-elements, permeten aplicar un estil a un element no només en relació amb el contingut de l'estructura del document, sinó també en relació als factors externs com l'historial del navegador ({{ cssxref(":visited") }}, per exemple), l'estat del seu contingut (com {{ cssxref(":checked") }} en alguns elements de formulari), o la posició del ratolí (com {{ cssxref(":hover") }} que permet saber si el ratolí està sobre un element o no). Per veure una llista completa dels selectors, visiteu <a href="http://www.w3.org/TR/selectors/#selectors">especificació CSS3 Selectors working</a>.</p>

<div class="tuto_example">
<div class="tuto_type">Sintaxi</div>

<pre class="brush:css">selector:pseudo-class {
  property: value;
}
</pre>
</div>

<h4 id="Llista_de_pseudo-classes">Llista de pseudo-classes</h4>

<ul>
 <li>{{ Cssxref(":link") }}</li>
 <li>{{ Cssxref(":visited") }}</li>
 <li>{{ Cssxref(":active") }}</li>
 <li>{{ Cssxref(":hover") }}</li>
 <li>{{ Cssxref(":focus") }}</li>
 <li>{{ Cssxref(":first-child") }}</li>
 <li>{{ Cssxref(":last-child") }}</li>
 <li>{{ Cssxref(":nth-child") }}</li>
 <li>{{ Cssxref(":nth-last-child") }}</li>
 <li>{{ Cssxref(":nth-of-type") }}</li>
 <li>{{ Cssxref(":first-of-type") }}</li>
 <li>{{ Cssxref(":last-of-type") }}</li>
 <li>{{ Cssxref(":empty") }}</li>
 <li>{{ Cssxref(":target") }}</li>
 <li>{{ Cssxref(":checked") }}</li>
 <li>{{ Cssxref(":enabled") }}</li>
 <li>{{ Cssxref(":disabled") }}</li>
</ul>

<h3 id="Llista_de_selectors">Llista de selectors</h3>

<p>Una regla pot ser compartida per molts selectors mitjançant una coma (,) per separar els selectors.</p>

<div class="tuto_example">
<div class="tuto_type">Exemple</div>
En l'exemple, ambdós elements que tenen la classe "content-1" i elements que tenen la classe "content-2" per visualitzar el text en negreta.

<pre class="brush:css">.content-1, .content-2 {
  font-weight: bold;
}
</pre>
</div>

<h2 id="Informació_Especificitat"><span class="short_text" id="result_box" lang="ca"><span>Informació</span><span>:</span> <span>Especificitat</span></span></h2>

<p>Diverses regles poden tenir selectors que coincideixin amb el mateix element. Si una propietat es dóna en una sola regla, no hi ha conflicte i la propietat s'estableix en l'element. Si més d'una regla s'aplica a un element i estableix la mateixa propietat, llavors CSS dóna prioritat a la regla que té el selector més específic. Un selector de ID és més <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity">específic</a> que una classe, pseudo-classe o selector d'atribut, que al seu torn són més específics que un selector d'etiquetes o pseudo-element.</p>

<div class="tuto_details">
<div class="tuto_type">Més detalls</div>

<p>També es poden combinar selectors, fent un selector més específic. Per exemple, el selector <code>.key</code> selecciona tots els elements que tenen el nom de classe <code>key</code>. El selector <code>p.key</code> selecciona només elements {{ HTMLElement("p") }} que tenen el nom de classe <code>key</code>.</p>
</div>

<p>Si el full d'estil té un conflicte de regles i són igualment específiques, llavors CSS doneu prioritat a la regla que és més posterior en el full d'estil.</p>

<p>Quan tingueu un problema amb regles en conflicte, tracteu de resoldre-ho fent una de les regles més específiques, de manera que tingui prioritat. Si no podeu fer-ho, tracteu de moure una de les regles el més prop del final de la fulla d'estils perquè tingui prioritat.</p>

<h2 id="Informació_Els_selectors_basats_en_relacions"><span class="short_text" id="result_box" lang="ca"><span>Informació</span><span>:</span> <span>Els</span> <span>selectors</span> <span>basats</span> <span>en relacions</span></span></h2>

<p>CSS té algunes maneres de seleccionar elements en funció de les relacions entre els elements. Podeu utilitzar aquests per fer selectors que siguin més específics.</p>

<table id="relselectors">
 <caption>Selectors comuns basats en les relacions</caption>
 <tbody>
  <tr>
   <td style="width: 10em;"><strong>Selector</strong></td>
   <td><strong>Seleccions</strong></td>
  </tr>
  <tr>
   <td><code>A E</code></td>
   <td>Qualsevol element E que és un <em>descendent</em> d'un element A (que és: un fill, o un fill d'un fill, <em>etc</em>.)</td>
  </tr>
  <tr>
   <td><code>A &gt; E</code></td>
   <td>Qualsevol element E que és un <em>fill</em> (és a dir, descendent directe) d'un element A</td>
  </tr>
  <tr>
   <td><code>E:first-child</code></td>
   <td>Qualsevol element E que és el <em>primer fill</em> del seu pare</td>
  </tr>
  <tr>
   <td><code>B + E</code></td>
   <td>Qualsevol element E que és el següent <em>germà</em> d'un element B (és a dir: el següent fill del mateix pare)</td>
  </tr>
 </tbody>
</table>

<p>Es poden combinar aquests per expressar relacions complexes.</p>

<p>També es pot utilitzar el símbol * (asterisc) en el sentit de "qualsevol element".</p>

<div class="tuto_example">
<div class="tuto_type">Exemple</div>

<p>Una taula HTML té un atribut <code>id</code>, però les seves files i cel·les no tenen identificadors individuals:</p>

<pre class="brush: html">&lt;table id="data-table-1"&gt;
...
&lt;tr&gt;
&lt;td&gt;Prefix&lt;/td&gt;
&lt;td&gt;0001&lt;/td&gt;
&lt;td&gt;default&lt;/td&gt;
&lt;/tr&gt;
...
</pre>

<p>Aquestes regles fan que la primera cel·la de cada fila estigui subratllat, i el germà de la primera cel·la de cada fila estigui tachat (en l'exemple la 2a cel·le). Només afecta a una taula específica en el document:</p>

<pre class="brush:css">    #data-table-1 td:first-child {text-decoration: underline;}
    #data-table-1 td:first-child + td {text-decoration: line-through;}
</pre>

<p>Aquest és el resultat:</p>

<table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
 <tbody>
  <tr>
   <td>
    <table style="margin-right: 2em; width: 18em;">
     <tbody>
      <tr>
       <td><u>Prefix</u></td>
       <td><s>0001</s></td>
       <td>default</td>
      </tr>
     </tbody>
    </table>
   </td>
  </tr>
 </tbody>
</table>
</div>

<div class="tuto_details">
<div class="tuto_type">Més detalls</div>

<p>En la forma habitual, si feu un selector més específic, llavors s'augmenta la seva prioritat.</p>

<p>Si utilitzeu aquestes tècniques, s'evita la necessitat d'especificar els atributs <code>class</code> o <code>id</code> en tantes etiquetes en el document. En el seu lloc, CSS fa la feina.</p>

<p>En grans dissenys on la velocitat és important, podeu fer que les vostres fulles d'estil siguin més eficients, evitant regles complexes que depenen de les relacions entre els elements.</p>

<p>Per a més exemples sobre taules, consulteu <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Tables" title="en-US/docs/Web/Guide/CSS/Getting_Started/Tables">Taules</a> en la pàgina Referència CSS..</p>
</div>

<h2 id="Acció_Ús_dels_selectors_class_i_ID">Acció: Ús dels selectors class i ID</h2>

<ol>
 <li>Editeu l'arxiu HTML, i duplicar el paràgraf copiant i enganxant.</li>
 <li>A continuació, afegir els atributs <strong>id</strong> i <strong>class</strong> a la primera còpia, i un atribut <strong>id</strong> a la segona còpia com es mostra a continuació. Com a alternativa, copiar i enganxar tot l'arxiu de nou:
  <pre class="brush: html">&lt;!doctype html&gt;
&lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Sample document&lt;/title&gt;
  &lt;link rel="stylesheet" href="style1.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p id="first"&gt;
      &lt;strong class="carrot"&gt;C&lt;/strong&gt;ascading
      &lt;strong class="spinach"&gt;S&lt;/strong&gt;tyle
      &lt;strong class="spinach"&gt;S&lt;/strong&gt;heets
    &lt;/p&gt;
    &lt;p id="second"&gt;
      &lt;strong&gt;C&lt;/strong&gt;ascading
      &lt;strong&gt;S&lt;/strong&gt;tyle
      &lt;strong&gt;S&lt;/strong&gt;heets
    &lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>
 </li>
 <li><span id="result_box" lang="ca"><span>Ara</span> <span>editeu el fitxer</span> <span>CSS.</span> <span>Substituir</span> <span>tot</span> <span>el contingut</span> <span>per</span><span>:</span></span>
  <pre class="brush:css">strong { color: red; }
.carrot { color: orange; }
.spinach { color: green; }
#first { font-style: italic; }
</pre>
 </li>
 <li>Guardeu els arxius i actualitzar el navegador per veure el resultat:
  <table style="border: 2px outset #3366bb; padding: 1em;">
   <tbody>
    <tr>
     <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
    </tr>
    <tr>
     <td><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
    </tr>
   </tbody>
  </table>

  <p>Podeu tractar de reordenar les línies de l'arxiu CSS per mostrar que l'ordre no té efecte.</p>

  <p>Els selectors class <code>.carrot</code> i <code>.spinach</code> tenen prioritat sobre el selector d'etiqueta <code>strong</code>.</p>

  <p>El selector ID <code>#first</code> té prioritat sobre els selectors class i tag.</p>
 </li>
</ol>

<div class="tuto_example">
<div class="tuto_type">Reptes</div>

<ol>
 <li>Sense canviar el arxiu HTML, afegiu una sola regla a l'arxiu CSS que mantingui totes les lletres inicials en el mateix color que estan ara, però faci que tot l'altre text en el segon paràgraf sigui blau:
  <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
   <tbody>
    <tr>
     <td style="font-style: italic;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
    </tr>
    <tr>
     <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
    </tr>
   </tbody>
  </table>
 </li>
 <li>Ara canvieu la regla que acabeu d'afegir (sense canviar res més), per fer el primer paràgraf també blau:
  <table style="background-color: white; border: 2px outset #3366bb; padding: 1em;">
   <tbody>
    <tr>
     <td style="font-style: italic; color: blue;"><strong style="color: orange;">C</strong>ascading <strong style="color: green;">S</strong>tyle <strong style="color: green;">S</strong>heets</td>
    </tr>
    <tr>
     <td style="color: blue;"><strong style="color: red;">C</strong>ascading <strong style="color: red;">S</strong>tyle <strong style="color: red;">S</strong>heets</td>
    </tr>
   </tbody>
  </table>
 </li>
</ol>

<div class="tuto_details" id="tutochallenge">
<div class="tuto_type">Possible solution</div>

<ol>
 <li>Add a rule with an ID selector of <code>#second</code> and a declaration <code>color: blue;</code>, as shown below:

  <pre class="brush: css">#second { color: blue; }
</pre>
  A more specific selector, <code>p#second</code> also works.</li>
 <li>Change the selector of the new rule to be a tag selector using <code>p</code>:
  <pre class="brush: css">p { color: blue; }
</pre>
 </li>
</ol>
<a class="hideAnswer" href="#challenge">Hide solution</a></div>
<a href="#tutochallenge" title="Display a possible solution for the challenge">Veure la solució per el repte.</a></div>

<h2 id="Acció_L'ús_de_selectors_de_pseudo-classes">Acció: L'ús de selectors de pseudo-classes</h2>

<ol>
 <li><span class="short_text" id="result_box" lang="ca"><span>Creeu un arxiu</span> <span>HTML amb el</span> <span>següent</span> <span>contingut</span><span>:</span></span>

  <pre class="brush: html">&lt;!doctype html&gt;
&lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;title&gt;Sample document&lt;/title&gt;
  &lt;link rel="stylesheet" href="style1.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p&gt;Go to our &lt;a class="homepage" href="http://www.example.com/" title="Home page"&gt;Home page&lt;/a&gt;.&lt;/p&gt;
  &lt;/body&gt;
&lt;/html&gt;
</pre>
 </li>
 <li>Ara editeu el fitxer CSS. Substituir tot el contingut per:
  <pre class="brush: css">a.homepage:link, a.homepage:visited {
  padding: 1px 10px 1px 10px;
  color: #fff;
  background: #555;
  border-radius: 3px;
  border: 1px outset rgba(50,50,50,.5);
  font-family: georgia, serif;
  font-size: 14px;
  font-style: italic;
  text-decoration: none;
}

a.homepage:hover, a.homepage:focus, a.homepage:active {
  background-color: #666;
}
</pre>
 </li>
 <li>Guardeu els arxius i actualitzar el navegador per veure el resultat (posar el ratolí sobre el següent enllaç per veure l'efecte):
  <table style="border: 2px outset #3366bb; padding: 1em;">
   <tbody>
    <tr>
     <td>Anem-nos  <a class="tutospecial" href="#" title="Home page">Home page</a><span class="hidden"> </span><span class="hidden"> </span></td>
    </tr>
   </tbody>
  </table>
 </li>
</ol>

<h2 id="Acció_L'ús_de_selectors_basats_en_les_relacions_i_pseudo-classes"><span id="result_box" lang="ca"><span>Acció</span><span>: L'ús de</span> <span>selectors</span> <span>basats en</span> <span>les</span> <span>relacions</span> <span>i pseudo</span><span>-</span><span>classes</span></span></h2>

<p>Amb els selectors basats en relacions i pseudo-classes es poden crear complexes algoritmes en cascada. Aquesta és una tècnica comuna que s'utilitza, per exemple, amb la finalitat de crear <strong>menús desplegables en CSS pur</strong> (això només és CSS, sense necessitat d'utilitzar<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript"> JavaScript</a>). L'essència d'aquesta tècnica és la creació d'una regla com la següent:</p>

<pre class="brush: css">div.menu-bar ul ul {
  display: none;
}

div.menu-bar li:hover &gt; ul {
  display: block;
}</pre>

<p><span id="result_box" lang="ca"><span class="alt-edited">per a ser aplicat a una estructura HTML com la següent:</span></span></p>

<pre class="brush: html">&lt;div class="menu-bar"&gt;
  &lt;ul&gt;
    &lt;li&gt;
      &lt;a href="example.html"&gt;Menu&lt;/a&gt;
      &lt;ul&gt;
        &lt;li&gt;
          &lt;a href="example.html"&gt;Link&lt;/a&gt;
        &lt;/li&gt;
        &lt;li&gt;
          &lt;a class="menu-nav" href="example.html"&gt;Submenu&lt;/a&gt;
          &lt;ul&gt;
            &lt;li&gt;
              &lt;a class="menu-nav" href="example.html"&gt;Submenu&lt;/a&gt;
              &lt;ul&gt;
                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
                &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/li&gt;
            &lt;li&gt;&lt;a href="example.html"&gt;Link&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
&lt;/div&gt;
</pre>

<p>Vegeu el exemple complet d'un menú desplegable basat en CSS com a possible referència.</p>

<h2 id="I_ara_què">I ara què?</h2>

<p>La vostre fulla d'estils, d'exemple, està començant a semblar densa i complicada. La següent secció descriu la manera de fer més <a href="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS" title="/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS">fàcil de llegir</a> la CSS.{{nextPage("/en-US/docs/Web/Guide/CSS/Getting_Started/Readable_CSS", "CSS llegible")}}</p>