:nth-child

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

Sumari

La pseudo-class CSS :nth-child(an+b) coincideix amb un element que té an+b-1 germans abans d'ell en l'arbre del document, per a un determinat valor positiu o zero de n, i té un element pare. Dit més sencillament, el selector coincideix amb un nombre d'elements fills, en que la seva posició numèrica en la sèrie dels fills coincideix amb el patró an+b.

Alguns exemples:

  • 1n+0, o simplement n, coincidiria amb cada element fill. n no coincideix amb el navegador Android 4.3 i inferior, mentre que 1n ho fa. 1n fa el mateix que 1n+0. No dubteu a utilitzar el que es vegi millor.
  • 2n+0, o simplement 2n, coincidiria amb elements fills 2, 4, 6, 8, etc. Podeu substituir la paraula clau even per a aquesta expressió.
  • 2n+1 coincidiria amb elements fills 1, 3, 5, 7, etc. Podeu substituir la paraula clau odd per a aquesta expressió.
  • 3n+4 coincidiria amb elements fills 4, 7, 10, 13, etc.

Els valors de a i b han de ser nombres enters, i l'índex del primer fill d'un element 1. En altres paraules, aquesta classe coincideix amb tots els fills l'índex dels quals cau en el conjunt {an + b; n = 0, 1, 2, ...}.

Un cas d'ús comú és que coincideixi amb cada altra fila d'una taula.

Sintaxi

:nth-child( <an-plus-b> [ of <selector># ]? ) { style properties }

where
<an-plus-b> = An+B | even | odd

Exemples

Exemple de selectors

tr:nth-child(2n+1)
Representa les files imparells d'una taula HTML.
tr:nth-child(odd)
Representa les files imparells d'una taula HTML.
tr:nth-child(2n)
Representa les files parells d'una taula HTML.
tr:nth-child(even)
Representa les files parells d'una taula HTML.
span:nth-child(0n+1)
Representa un element span que és el primer fill del seu pare; és el mateix que el selector :first-child.
span:nth-child(1)
Equivalent a l'anterior.
span:nth-child(-n+3)
Coincideix si l'element és un dels tres primers fills del seu pare i també un span.

Exemple sencer

El codi HTML següent...

<p><code>span:nth-child(2n+1)</code>, <em>without</em> an <code>&lt;em&gt;</code>
 inside the child elements. Children 1, 3, 5, and 7 are selected, as expected.</p>

<div class="first">
      <span>This span is selected!</span>
      <span>This span is not. :(</span>
      <span>What about this?</span>
      <span>And this one?</span>
      <span>Another example</span>
      <span>Yet another example</span>
      <span>Aaaaand another</span>
</div>

<p><code>span:nth-child(2n+1)</code>, <em>with</em> an <code>&lt;em&gt;</code>
 inside the child elements. Children 1, 5, and 7 are selected. 3 is used in the
 counting because it is a child, but it isn't selected because it isn't a 
<code>&lt;span&gt;</code>.</p>

<div class="second">
      <span>This span is selected!</span>
      <span>This span is not. :(</span>
      <em>This one is an em.</em>
      <span>What about this?</span>
      <span>And this one?</span>
      <span>Another example</span>
      <span>Yet another example</span>
      <span>Aaaaand another</span>
</div>

<p><code>span:nth-of-type(2n+1)</code>, <em>with</em> an <code>&lt;em&gt;</code>
 inside the child elements. Children 1, 4, 6, and 8 are selected. 3 isn't
 used in the counting or selected because it is an <code>&lt;em&gt;</code>, 
not a <code>&lt;span&gt;</code>, and <code>nth-of-type</code> only selects
 children of that type. The <code>&lt;em&gt;</code> is completely skipped
 over and ignored.</p>
 
  <div class="third">
      <span>This span is selected!</span>
      <span>This span is not. :(</span>
      <em>This one is an em.</em>
      <span>What about this?</span>
      <span>And this one?</span>
      <span>Another example</span>
      <span>Yet another example</span>
      <span>Aaaaand another</span>
</div>

...i l'ús d'aquest CSS...

html {
  font-family: sans-serif;
}

span, div em {
  padding: 10px;
  border: 1px solid green;
  display: inline-block;
  margin-bottom: 3px;
}
    
.first span:nth-child(2n+1),
.second span:nth-child(2n+1),
.third span:nth-of-type(2n+1) {
  background-color: lime;
}

...donarà com a resultat:

Especificacions

Especificació Estat Comentari
Selectors Level 4
The definition of ':nth-child' in that specification.
Working Draft Sense canvis.
Selectors Level 3
The definition of ':nth-child' in that specification.
Recommendation Definició inicial.

Característica Chrome Firefox (Gecko) Internet Explorer Opera Safari
Suport bàsic 1.0 3.5 (1.9.1) 9.0 9.5 3.1
Característica Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suport bàsic 2.1 1.0 (1.9.1) 9.0 9.5 3.1

Notes

  • Opera no pot gestionar la inserció dinàmica d'elements.

Veure

Document Tags and Contributors

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