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

---
title: Selectors CSS
slug: Learn/CSS/Building_blocks/Selectors
translation_of: Learn/CSS/Building_blocks/Selectors
original_slug: Learn/CSS/Building_blocks/Selectors_CSS
---
<div>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</div>

<p class="summary">En el {{Glossary("CSS")}}, els selectors s'utilitzen per a determinar els elements {{glossary("HTML")}} de les pàgines web als quals volem aplicar estil. Hi ha una gran varietat de selectors CSS disponibles, que permeten obtenir una precisió àmplia a l’hora de seleccionar elements per a aplicar-los estil. En aquest article i els seus subarticles s'explicaran els diferents tipus amb detall i observarem com funcionen.</p>

<table class="learn-box standard-table">
 <tbody>
  <tr>
   <th scope="row">Prerequisits:</th>
   <td>Coneixements bàsics d'informàtica, tenir el <a href="/ca/docs/Learn/Getting_started_with_the_web/Instal·lació_bàsica_programari">programari bàsic instal·lat</a>, coneixements bàsics de com <a href="/ca/docs/Learn/Getting_started_with_the_web/Tractar_amb_arxius">treballar amb fitxers</a> i d'HTML (mira <a href="/ca/docs/Learn/HTML/Introducció_al_HTML">Introducció a l'HTML</a>) i nocions bàsiques de <a href="/ca/docs/Learn/CSS/First_steps">com funciona el CSS</a>.</td>
  </tr>
  <tr>
   <th scope="row">Objectiu:</th>
   <td>Conèixer amb detall com funcionen els selectors CSS.</td>
  </tr>
 </tbody>
</table>

<h2 id="Què_és_un_selector">Què és un selector?</h2>

<p>Ja has conegut els selectors. Un selector CSS és la primera part d'una regla CSS. Es tracta d’un patró d’elements i d’altres termes que diuen al navegador quins elements HTML s’han de seleccionar perquè tinguin els valors de les propietat CSS segons la regla que se’ls ha d’aplicar. L'element o els elements que selecciona el selector s'anomenen el <em>subjecte del selector</em>.</p>

<p><img alt="Una mica de codi amb un h1 ressaltat." src="https://mdn.mozillademos.org/files/16550/selector.png" style="border: 1px solid #cccccc; height: 218px; width: 471px;"></p>

<p>En articles anteriors, has vist altres selectors i també que hi ha selectors que es focalitzen en el document de maneres diferents (per exemple, seleccionant un element com <code>h1</code>, o una classe com <code>.special</code>).</p>

<p>En CSS, els selectors es defineixen en l’especificació dels selectors CSS; com qualsevol altra part del CSS, han de ser compatibles amb els navegadors perquè funcionin. La majoria de selectors que trobaràs es defineixen en l’<a href="https://www.w3.org/TR/selectors-3/">especificació de selectors de nivell 3</a>, que és una especificació madura i, per tant, trobaràs una compatibilitat de navegadors excel·lent per a aquests selectors.</p>

<h2 id="Llistes_de_selectors">Llistes de selectors</h2>

<p>Si tens més d'un element que utilitza el mateix CSS, cadascun dels selectors es poden combinar en una <em>llista de selectors</em> que aplica la mateixa regla a tots els selectors. Per exemple, si tenim el mateix CSS per a <code>h1</code> i també per a una classe <code>.special</code>, ho podríem escriure com dues regles separades.</p>

<pre class="brush: css notranslate"><code>h1 {
  color: blue;
}

.special {
  color: blue;
} </code></pre>

<p>Però també podem combinar-los en una llista de selectors, afegint-hi una coma entre ells.</p>

<pre class="brush: css notranslate"><code>h1, .special {
  color: blue;
} </code></pre>

<p>L’espai en blanc és vàlid tant abans com després de la coma. També pots decidir que la llegibilitat dels selectors és més bona si cada un està en una línia nova.</p>

<pre class="brush: css notranslate"><code>h1,
.special {
  color: blue;
} </code></pre>

<p>En l'exemple en viu següent, combina els dos selectors que tenen declaracions idèntiques. La visualització hauria de ser la mateixa després de la combinació.</p>

<p>{{EmbedGHLiveSample("css-examples/learn/selectors/selector-list.html", '100%', 1000)}}</p>

<p>Si agrupes els selectors d'aquesta manera, i algun dels selectors no és vàlid, s'ignorarà tota la regla.</p>

<p>En l'exemple següent, la regla del selector de classe no vàlida s’ignorarà mentre que no hi haurà problemes a l'hora d’aplicar estil a <code>h1</code>.</p>

<pre class="brush: css notranslate"><code>h1 {
  color: blue;
}

..special {
  color: blue;
} </code></pre>

<p>Tanmateix, en combinar-les, no s’aplicarà estil ni a <code>h1</code> ni a la classe, perquè la regla ja no és vàlida.</p>

<pre class="brush: css notranslate"><code>h1, ..special {
  color: blue;
} </code></pre>

<h2 id="Tipus_de_selectors">Tipus de selectors</h2>

<p>Hi ha uns quants grups diferents de selectors, i conèixer quin tipus de selector necessites t'ajudarà a trobar l'eina adequada a l'hora de treballar. En els subarticles d’aquest article examinarem amb més detall els diferents grups de selectors.</p>

<h3 id="Selectors_de_tipus_de_classe_i_d’ID">Selectors de tipus, de classe i d’ID</h3>

<p>Aquest grup inclou selectors que delimiten un element HTML, com ara <code>&lt;h1&gt;</code>.</p>

<pre class="brush: css notranslate">h1 { }</pre>

<p>També inclou selectors que delimiten una classe:</p>

<pre class="brush: css notranslate">.box { }</pre>

<p>o un ID:</p>

<pre class="brush: css notranslate">#unique { }</pre>

<h3 id="Selectors_datribut">Selectors d'atribut</h3>

<p>Aquest grup de selectors t'ofereix diferents maneres de seleccionar elements segons la presència d’un atribut determinat en un element:</p>

<pre class="brush: css notranslate">a[title] { }</pre>

<p>O fins i tot fer una selecció segons la presència d’un atribut amb un valor determinat:</p>

<pre class="brush: css notranslate">a[href="https://example.com"] { }</pre>

<h3 id="Les_pseudoclasses_i_els_pseudoelements">Les pseudoclasses i els pseudoelements</h3>

<p>Aquest grup de selectors inclou les pseudoclasses, que apliquen estil a certs estats d’un element. La pseudoclasse <code>:hover</code>, per exemple, selecciona un element només quan hi passa pel damunt el cursor del ratolí:</p>

<pre class="brush: css notranslate">a:hover { }</pre>

<p>També inclou els pseudoelements, que seleccionen una part determinada d’un element en lloc de l’element en si. Per exemple, <code>::first-line</code> sempre selecciona la primera línia de text que hi ha dins d’un element (<code>&lt;p&gt;</code> en el cas següent), i actua com si un <code>&lt;span&gt;</code> delimités la primera línia amb format i després la seleccionés.</p>

<pre class="brush: css notranslate">p::first-line { }</pre>

<h3 id="Combinadors">Combinadors</h3>

<p>El grup final de selectors fa combinacions d’altres selectors que delimiten encara més els elements dels nostres documents. A continuació, per exemple, se seleccionen els paràgrafs que són fills directes dels elements <code>&lt;article&gt;</code> amb el combinador de fills (<code>&gt;</code>):</p>

<pre class="brush: css notranslate">article &gt; p { }</pre>

<h2 id="Propers_passos">Propers passos</h2>

<p>Pots donar un cop d'ull a la taula de referència de selectors que hi ha a continuació per trobar enllaços directes als diversos tipus de selectors de la secció d'aprenentatge o de MDN en general, o pots continuar en ordre i descobrir <a href="/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS/Selectors_de_tipus_classe_i_ID">els tipus de selectors de classe i d’ID</a>.</p>

<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Cascade_and_inheritance", "Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors", "Learn/CSS/Building_blocks")}}</p>

<h2 id="Taula_de_referència_dels_selectors">Taula de referència dels selectors</h2>

<p>La taula següent t'ofereix una visió general dels selectors que tens disponibles, juntament amb enllaços a les pàgines d’aquesta guia, que et mostraran com utilitzar cada tipus de selector. També hem inclòs un enllaç a la pàgina MDN de cada selector, en què pots consultar la informació de compatibilitat amb els navegadors. Pots fer-ho servir com a referència de consulta per quan més endavant hagis de buscar selectors, o a mesura que experimentes amb el CSS en general.</p>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Selector</th>
   <th scope="col">Exemple</th>
   <th scope="col">Tutorial de CSS</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td><a href="/ca/docs/Web/CSS/Selectors_de_Tipus">Selector de tipus</a></td>
   <td><code>h1 { }</code></td>
   <td><a href="/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS/Selectors_de_tipus_classe_i_ID#Selectors_de_tipus">Selectors de tipus</a></td>
  </tr>
  <tr>
   <td><a href="/ca/docs/Web/CSS/Selectors_Universal">Selector universal</a></td>
   <td><code>* { }</code></td>
   <td><a href="/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS/Selectors_de_tipus_classe_i_ID#El_selector_universal">El selector universal</a></td>
  </tr>
  <tr>
   <td><a href="/ca/docs/Web/CSS/Selectors_de_Classe">Selector de classe</a></td>
   <td><code>.box { }</code></td>
   <td><a href="/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS/Selectors_de_tipus_classe_i_ID#Selectors_de_classe">Selectors de classe</a></td>
  </tr>
  <tr>
   <td><a href="/ca/docs/Web/CSS/Selectors_ID">Selector d’ID</a></td>
   <td><code>#unique { }</code></td>
   <td><a href="/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS/Selectors_de_tipus_classe_i_ID#Selectors_ID">Selectors d’ID</a></td>
  </tr>
  <tr>
   <td><a href="/ca/docs/Web/CSS/Selectors_d'Atribut">Selector d'atribut</a></td>
   <td><code>a[title] { }</code></td>
   <td><a href="/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS/Selectors_atribut">Selectors d'atribut</a></td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/Pseudo-classes">Selectors de pseudoclasse</a></td>
   <td><code>p:first-child { }</code></td>
   <td><a href="/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS/Pseudo-classes_and_pseudo-elements#Qu%C3%A8_%C3%A9s_una_pseudoclasse">Pseudoclasse</a></td>
  </tr>
  <tr>
   <td><a href="/en-US/docs/Web/CSS/Pseudo-elements">Selectors de pseudoelement</a></td>
   <td><code>p::first-line { }</code></td>
   <td><a href="/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS/Pseudo-classes_and_pseudo-elements#Qu%C3%A8_%C3%A9s_un_pseudoelement">Pseudoelements</a></td>
  </tr>
  <tr>
   <td><a href="/ca/docs/Web/CSS/Selectors_de_descendents">Combinador descendent</a></td>
   <td><code>article p</code></td>
   <td><a href="/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS/Combinadors">Combinador descendent</a></td>
  </tr>
  <tr>
   <td><a href="/ca/docs/Web/CSS/Selectors_de_fills">Combinador de fills</a></td>
   <td><code>article &gt; p</code></td>
   <td><a href="/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS/Combinadors#Selector_de_combinaci%C3%B3_delements_fill">Combinador de fills</a></td>
  </tr>
  <tr>
   <td><a href="/ca/docs/Web/CSS/Selectors_de_germans_adjacents">Combinador de germans adjacents</a></td>
   <td><code>h1 + p</code></td>
   <td><a href="/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS/Combinadors#Germans_adjacents">Germans adjacents</a></td>
  </tr>
  <tr>
   <td><a href="/ca/docs/Web/CSS/Selectors_general_de_germans">Combinador general de germans</a></td>
   <td><code>h1 ~ p</code></td>
   <td><a href="/ca/docs/Learn/CSS/Building_blocks/Selectors_CSS/Combinadors#Germans_generals">Germans general</a></td>
  </tr>
 </tbody>
</table>

<h2 id="En_aquest_mòdul">En aquest mòdul</h2>

<ol>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance">La cascada i l'herència</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors">Selectors CSS</a>
  <ul>
   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Selectors de tipus, de classe i d’ID</a></li>
   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Selectors d'atribut</a></li>
   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements">Les pseudoclasses i els pseudoelements</a></li>
   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Combinators">Combinadors</a></li>
  </ul>
 </li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/The_box_model">El model de caixes</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Backgrounds_and_borders">Fons i vores</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Handling_different_text_directions">El tractament del text en diverses direccions</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordament dels continguts</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Values_and_units">Els valors i les unitats</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Sizing_items_in_CSS">Dimensionar elements en CSS</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Images_media_form_elements">Imatges, media i elements de formulari</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Styling_tables">Aplicar estil a les taules</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Debugging_CSS">Depurar el CSS</a></li>
 <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Organizing">Organitza el teu CSS</a></li>
</ol>