From cb9e359a51c3249d8f5157db69d43fd413ddeda6 Mon Sep 17 00:00:00 2001 From: Florian Merz Date: Thu, 11 Feb 2021 14:45:12 +0100 Subject: unslug ca: move --- .../selectors/combinators/index.html | 111 +++++++++++++++++++++ 1 file changed, 111 insertions(+) create mode 100644 files/ca/learn/css/building_blocks/selectors/combinators/index.html (limited to 'files/ca/learn/css/building_blocks/selectors/combinators') 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 +--- +

{{LearnSidebar}}{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}

+ +

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.

+ + + + + + + + + + + + +
Prerequisits:Coneixements bàsics d'informàtica, tenir el programari bàsic instal·lat, coneixements bàsics de com treballar amb fitxers i d'HTML (mira Introducció a l'HTML) i nocions bàsiques de com funciona el CSS.
Objectiu:Obtenir més informació sobre els diferents selectors que es poden utilitzar en CSS.
+ +

Selector de descendents

+ +

Ja has vist selectors de descendents en articles anteriors (selectors separats per un espai):

+ +
body article p
+ +

Aquests selectors seleccionen elements que són descendents d’un altre selector. No cal que els elements que se seleccionen siguin fills directes.

+ +

En l'exemple següent se seleccionen només els elements <p> que hi ha dins d'un element que està etiquetat amb una classe .box.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/descendant.html", '100%', 500)}}

+ +

Combinador de fills

+ +

El combinador de fills és un símbol de «més gran que» (>), 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 <p> que són descendents directes d’elements <article>:

+ +
article > 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 <li> que són fills directes de <ul> i els apliquem una vora superior.

+ +

Si suprimim l’element >, que designa que es tracta d'un selector de fills, obtenim un selector de descendents, i tots els elements <li> adquireixen una vora vermella.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/child.html", '100%', 600)}}

+ +

Selector de germans adjacents

+ +

El selector de germans adjacents (+) 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 <img> que hi ha just a continuació d‘elements <p>:

+ +
p + img
+ +

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’<h1> i hi apliquem estil.

+ +

Si insereixes qualsevol altre element, com ara <h2>, entre <h1> i <p>, el paràgraf ja no coincideix amb el selector, i el color de fons no s'aplica.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/adjacent.html", '100%', 800)}}

+ +

Selector de germans general

+ +

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 (~). Per a seleccionar tots els elements <img> que estiguin en qualsevol lloc a continuació dels elements <p>, hem de fer això:

+ +
p ~ img
+ +

En l'exemple següent seleccionem tots els elements <p> que hi ha després de <h1>, i tot i que en el document també hi ha un element <div>, se selecciona també l'element <p> que hi ha després.

+ +

{{EmbedGHLiveSample("css-examples/learn/selectors/general.html", '100%', 600)}}

+ +

L'ús dels combinadors

+ +

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 <ul>, pots utilitzar el codi següent:

+ +
ul > li[class="a"]  {  }
+ +

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.

+ +

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.

+ +

Comprova les teves habilitats

+ +

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 Test your skills: Selectors.

+ +

Avancem

+ +

Aquesta és l’última secció dels nostres articles sobre selectors. A continuació passarem a una altra qüestió important del CSS: el model de caixes del CSS.

+ +

{{PreviousMenuNext("Learn/CSS/Building_blocks/Selectors/Pseudo-classes_and_pseudo-elements", "Learn/CSS/Building_blocks/The_box_model", "Learn/CSS/Building_blocks")}}

+ +

En aquest mòdul

+ +
    +
  1. La cascada i l'herència
    2. +
  2. Els selectors CSS + +
    3. +
  3. El model de caixes
    4. +
  4. Fons i vores
    5. +
  5. El tractament de les diverses direccions del text
    6. +
  6. El desbordament del contingut
    7. +
  7. Els valors i les unitats
    8. +
  8. Dimensionar elements en CSS
    9. +
  9. Elements d'imatge, de mèdia i de formulari
    10. +
  10. Aplicar estil a les taules
    11. +
  11. Depurar el CSS
    12. +
  12. Organitzar el teu CSS
    13. +
-- cgit v1.2.3-54-g00ecf