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

En el nostre article final sobre selectors explorarem combinadors i selectors múltiplesdues maneres de combinar diversos selectors junts per obtenir més funcions de selecció útils.

Combinadors

L'ús d'un selector alhora és útil, però pot ser ineficient en algunes situacions. Els selectors CSS esdevenen encara més útils quan comencen a combinar-los per realitzar seleccions molt més específiques. CSS té diverses maneres de seleccionar elements basats en la relació entre ells. Aquestes relacions s'expressen amb combinadors de la manera següent (A i B representen qualsevol selector vist anteriorment):

Combinadors Selecció
A, B Qualsevol element que coincideixi amb A i/o B (vegeu també Múltiples selectors en una regla, a continuació).
A B Qualsevol element que coincideixi amb B que sigui descendent d'un element que coincideixi amb A (és a dir, un fill o un fill d'un fill, etc..).
A > B Qualsevol element que coincideixi amb B que sigui un fill directe d'un element que coincideixi amb A.
A + B Qualsevol element que coincideixi amb B que sigui el germà següent d'un element que coincideixi amb A (és a dir, el següent fill del mateix pare).
A ~ B Qualsevol element que coincideixi amb B que sigui un dels següents germans d'un element que coincideixi amb A (és a dir, un dels següents fills del mateix pare).

Exemple de combinadors

Vegem un exemple amb tot això treballant junts:

<table lang="en-US" class="with-currency">
  <thead>
    <tr>
      <th scope="col">Product</th>
      <th scope="col">Qty.</th>
      <th scope="col">Price</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <th colspan="2" scope="row">Total:</th>
      <td>148.55</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Lawnchair</td>
      <td>1</td>
      <td>137.00</td>
    </tr>
    <tr>
      <td>Marshmallow rice bar</td>
      <td>2</td>
      <td>1.10</td>
    </tr>
    <tr>
      <td>Book</td>
      <td>1</td>
      <td>10.45</td>
    </tr>
  </tbody>
</table>

A continuació, utilitzem el següent full d'estils :

/* Organització d'una taula bàsica */
table {
  font: 1em sans-serif;
  border-collapse: collapse;
  border-spacing: 0;
}

/* Tots els <td>s dins d'una <table> i tots <th>s dins d'una <table>
   la Coma no és un combinador, només us permet orientar
   Diversos selectors amb el mateix conjunt de normes CSS */
table td, table th {
  border : 1px solid black;
  padding: 0.5em 0.5em 0.4em;
}

/* All <th>s within <thead>s that are within <table>s */
table thead th {
  color: white;
  background: black;
}

/* All <td>s preceded by another <td>,
   within a <tbody>, within a <table> */
table tbody td + td {
  text-align: center;
}

/* All <td>s that are a last child,
   within a <tbody>, within a <table> */
table tbody td:last-child {
  text-align: right
}

/* All <th>s, within a <tfoot>s, within a <table> */
table tfoot th {
  text-align: right;
  border-top-width: 5px;
  border-left: none;
  border-bottom: none;
}

/* All <td>s preceded by a <th>, within a <table> */
table th + td {
  text-align: right;
  border-top-width: 5px;
  color: white;
  background: black;
}

/* All pseudo-elements "before" <td>s that are a last child,
   appearing within elements with a class of "with-currency" that
   also have an attribute "lang" with the value "en-US" */
.with-currency[lang="en-US"] td:last-child::before {
  content: '$';
}

/* All pseudo-elements "after" <td>s that are a last child,
   appearing within elements with the class "with-currency" that
   also have an attribute "lang" with the value "fr" */
.with-currency[lang="fr"] td:last-child::after {
  content: ' €';
}

Això ens ha donat els següents estils de taula, força agradables:

Aprenentatge actiu: escriure els vostres propis combinadors

L'exemple anterior s'ha dissenyat per mostrar el tipus de complexitat que podeu començar a aconseguir amb els combinadors. En aquest aprenentatge actiu, us ajudarem a escriure alguns dels vostres propis selectors més senzills que inclouen combinadors. En aquest exercici heu d'afegir un selector a les regles 2 a 4, a:

  1. Enllaços d'estil, però només enllaços que estan dins de la llista desordenada.
  2. Enllaços d'estil dins de la llista desordenada , només quan es planeja sobre ells..
  3. Estil només el paràgraf que ve directament després de l'encapçalament del nivell superior .

Si cometeu un error, sempre podeu restablir-lo mitjançant el botó Reset. Si esteu realment atrapats, premeu el botó Show solution per veure una resposta potencial.

Diversos selectors en una sola regla

Ja heu vist molts exemples d'això en acció, però anem a explicar-ho clarament per aclarir-ho. Podeu escriure diversos selectors separats per comes, per aplicar la mateixa regla a diversos conjunts d'elements seleccionats alhora. Per exemple:

p, li {
  font-size: 1.6em;
}

O això:

 h1, h2, h3, h4, h5, h6 {
  font-family: helvetica, 'sans serif';
}

Que segueix

Enhorabona, heu arribat al final d'un viatge bastant llarg per aprendre sobre Selectors. Fins i tot els desenvolupadors web més qualificats segueixen sorpresos del que és possible en la utilització dels selectors: no us sentiu malament si no recordeu totes les opcions: marqueu la pàgina principal de selectors i torneu a consultar-la quan sigui necessari.

En el nostre següent article ens centrarem en un altre tema CSS fonamental realment important: els tipus de valors que poden tenir les propietats i les unitats que estan involucrades en l'expressió de la longitud, color o altres valors que desitgeu. Anem a explorar els valors i unitats CSS.

Document Tags and Contributors

 Contributors to this page: Legioinvicta
 Last updated by: Legioinvicta,