Combinadors

Els últims selectors que veurem s’anomenen combinadors, perquè es combinen amb 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.

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.

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 títol d’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.

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.

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.

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.

En aquest mòdul

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