Combinadors

This translation is incomplete. Please help translate this article from English

Els últims selectors que veurem s’anomenen combinadors, perquè combinen altres selectors de manera que els proporciona una relació útil entre ells i la ubicació del contingut del 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 una idea de com funciona el CSS (mira Primers passos amb CSS).
Objectiu: Obtenir més informació sobre els diferents selectors que es poden utilitzar en CSS.

Selector de descendents

Ja t'has trobat amb selectors de descendents en articles anteriors (selectors amb espais entre ells):

body article p

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

A l'exemple següent fem coincidir només l'element <p> que es troba dins d'un element amb una classe .box.

Selector de combinació d'elements fill

El combinador de descendents és un símbol de «superior a» (>), que només coincideix quan els selectors seleccionen elements que són descendents directes. Els descendents que es troben més avall en la jerarquia no coincideixen. Per exemple, per seleccionar només els elements <p> que són descendents directes d’elements <article>:

article > p

En l'exemple següent, tenim una llista ordenada, imbricada dins d'una altra llista no ordenada. Fem servir el combinador de descendents per seleccionar només els elements <li> que són descendents directes de <ul> i els hi donem una vora superior.

Si suprimeixes el > que designa quue es tracta d'un combinador de descendents, acabaràs amb un selector de descendents i tots els elements <li> obtindran una vora vermella.

Germans adjacents

El selector de germans adjacents (+) s'utilitza per seleccionar un element si es troba al costat d'un altre element al mateix nivell de la jerarquia. Per exemple, per seleccionar tots els elements <img> que venen just després dels elements <p>:

p + img

Un cas d’ús comú és fer alguna cosa amb un paràgraf que segueix un encapçalament, com en el nostre exemple següent. Aquí busquem un paràgraf que es troba directament contigu a <h1> i li apliquem estil.

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

Germans generals

Si vols seleccionar els germans d’un element encara que no siguin directament adjacents, pots fer servir el combinador general de germans (~). Per seleccionar tots els elements <img> que vénen a qualsevol lloc després dels elements <p>, hauríem de fer això:

p ~ img

A l'exemple següent seleccionem tots els elements <p> que vénen després de <h1> i, tot i que també hi ha un <div> al document, l'element <p> que es troba després també ha estat seleccionat.

L'ús de selectors de combinació

Pots combinar qualsevol dels selectors que hem descobert en articles anteriors amb selectors de combinació per tal de seleccionar una part del document. Per exemple, si volem seleccionar els elements de la llista amb una classe de «a», que són descendents directes de <ul>, podríem utilitzar el següent.

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

Tingues cura quan creïs llistes grans de selectors que seleccionin parts molt específiques del document. Serà difícil reutilitzar les regles CSS, ja que has fet que el selector sigui molt específic per a la ubicació d'aquest element a l'etiquetatge.

Sovint és millor crear una classe senzilla i aplicar-la a l’element en qüestió. Dit això, els teus coneixements sobre combinadors et seran molt útils si necessites accedir a alguna cosa del document i 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 part important de CSS: el model de caixa CSS.

En aquest mòdul

  1. La cascada i l'herència
  2. Selectors CSS
  3. El model de caixa
  4. Fons i vores
  5. El maneig de diferents direccions de text
  6. El contingut que es desborda
  7. Els valors i les unitats
  8. Dimensionar elements en CSS
  9. Elements d'imatge, de media i de formulari
  10. Donar estil a les taules
  11. Depurar el CSS
  12. Organitzar el CSS