unslug ca: move

1 files changed, 111 insertions, 0 deletions

diff --git a/files/ca/learn/css/building_blocks/selectors/combinators/index.html b/files/ca/learn/css/building_blocks/selectors/combinators/index.html
new file mode 100644
index 0000000000..175379f986
--- /dev/null
+++ b/files/ca/learn/css/building_blocks/selectors/combinators/index.html
@@ -0,0 +1,111 @@
+---
+title: Combinadors
+slug: Learn/CSS/Building_blocks/Selectors_CSS/Combinadors
+translation_of: Learn/CSS/Building_blocks/Selectors/Combinators
+---
+<p>{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}</p>
+
+<p>Els últims selectors que veurem s’anomenen combinadors, perquè combinen altres selectors de manera que proporcionen una relació útil entre aquests i la ubicació de continguts en el document.</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>Obtenir més informació sobre els diferents selectors que es poden utilitzar en CSS.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Selector_de_descendents">Selector de descendents</h2>
+
+<p>Ja has vist selectors de descendents en articles anteriors (selectors separats per un espai):</p>
+
+<pre class="brush: css notranslate">body article p</pre>
+
+<p>Aquests selectors seleccionen elements que són descendents d’un altre selector. No cal que els elements que se seleccionen siguin fills directes.</p>
+
+<p>En l'exemple següent se seleccionen només els elements <code>&lt;p&gt;</code> que hi ha dins d'un element que està etiquetat amb una classe <code>.box</code>.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/descendant.html", '100%', 500)}}</p>
+
+<h2 id="Combinador_de_fills">Combinador de fills</h2>
+
+<p>El combinador de fills és un símbol de «més gran que» (<code>&gt;</code>), que només selecciona elements que són descendents directes. Els descendents que hi ha més avall en la jerarquia no se seleccionen; per exemple, per a seleccionar només els elements <code>&lt;p&gt;</code> que són descendents directes d’elements <code>&lt;article&gt;</code>:</p>
+
+<pre class="brush: css notranslate">article &gt; p</pre>
+
+<p>En aquest exemple hi ha una llista ordenada imbricada dins d'una altra llista no ordenada. Fem servir el combinador de fills per a seleccionar només els elements <code>&lt;li&gt;</code> que són fills directes de <code>&lt;ul&gt;</code> i els apliquem una vora superior.</p>
+
+<p>Si suprimim l’element <code>&gt;</code>, que designa que es tracta d'un selector de fills, obtenim un selector de descendents, i tots els elements <code>&lt;li&gt;</code> adquireixen una vora vermella.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}}</p>
+
+<h2 id="Selector_de_germans_adjacents">Selector de germans adjacents</h2>
+
+<p>El selector de germans adjacents (<code>+</code>) s'utilitza per a seleccionar un element que es troba immediatament a continuació d'un altre element en el mateix nivell de jerarquia; per exemple, per a seleccionar tots els elements <code>&lt;img&gt;</code> que hi ha just a continuació d‘elements <code>&lt;p&gt;</code>:</p>
+
+<pre class="brush: css notranslate">p + img</pre>
+
+<p>Un cas comú d’ús d’aquest combinador és per a fer alguna cosa amb un paràgraf que va a continuació d’un encapçalament, com en el nostre exemple següent. Aquí busquem un paràgraf que estigui immediatament a continuació d’<code>&lt;h1&gt;</code> i hi apliquem estil.</p>
+
+<p>Si insereixes qualsevol altre element, com ara <code>&lt;h2&gt;</code>, entre <code>&lt;h1&gt;</code> i <code>&lt;p&gt;</code>, el paràgraf ja no coincideix amb el selector, i el color de fons no s'aplica.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}}</p>
+
+<h2 id="Selector_de_germans_general">Selector de germans general</h2>
+
+<p>Si vols seleccionar els elements que són germans d’un element, encara que no siguin adjacents directes, pots fer servir el selector de germans general (<code>~</code>). Per a seleccionar tots els elements <code>&lt;img&gt;</code> que estiguin <em>en qualsevol lloc</em> a continuació dels elements <code>&lt;p&gt;</code>, hem de fer això:</p>
+
+<pre class="brush: css notranslate">p ~ img</pre>
+
+<p>En l'exemple següent seleccionem tots els elements <code>&lt;p&gt;</code> que hi ha després de <code>&lt;h1&gt;</code>, i tot i que en el document també hi ha un element <code>&lt;div&gt;</code>, se selecciona també l'element <code>&lt;p&gt;</code> que hi ha després.</p>
+
+<p>{{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}}</p>
+
+<h2 id="Lús_dels_combinadors">L'ús dels combinadors</h2>
+
+<p>Pots combinar qualsevol dels selectors que hem vist en articles anteriors amb els combinadors per a seleccionar parts d’un document. Per exemple, per a seleccionar els elements de llista que tenen una classe «a» que són descendents directes de <code>&lt;ul&gt;</code>, pots utilitzar el codi següent:</p>
+
+<pre class="brush: css notranslate">ul &gt; li[class="a"]  {  }</pre>
+
+<p>Tanmateix, has de tenir cura quan crees llistes grans de selectors que seleccionen parts molt específiques del document, perquè el selector serà molt específic per a la ubicació d'aquest element en l'etiquetatge i et serà difícil reutilitzar les regles CSS.</p>
+
+<p>Sovint és millor crear una classe senzilla i aplicar-la a l’element en qüestió. Ara bé, els coneixements sobre combinadors et poden ser molt útils si necessites accedir a algun part del document, però no pots accedir al codi HTML, potser a causa de la generació d’un CMS.</p>
+
+<h2 id="Comprova_les_teves_habilitats">Comprova les teves habilitats</h2>
+
+<p>Hem vist moltes coses en aquest article. Recordes la informació més important? Trobaràs més tests per a verificar que has retingut aquesta informació a <a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Selectors_Tasks">Test your skills: Selectors</a>.</p>
+
+<h2 id="Avancem">Avancem</h2>
+
+<p>Aquesta és l’última secció dels nostres articles sobre selectors. A continuació passarem a una altra qüestió important del CSS: el <a href="/ca/docs/Learn/CSS/Building_blocks/The_box_model">model de caixes del CSS</a>.</p>
+
+<p>{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}</p>
+
+<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">Els selectors CSS</a>
+  <ul>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Type_Class_and_ID_Selectors">Els selectors de tipus, de classe i d’ID</a></li>
+   <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Selectors/Attribute_selectors">Els 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">Els 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 de les diverses direccions del text</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/Building_blocks/Overflowing_content">El desbordament del contingut</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">Elements d'imatge, de mèdia i 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">Organitzar el teu CSS</a></li>
+</ol>