We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

La pseudo-class CSS :nth-child() CSS coincideix amb un o més elements basats en la seva posició entre un grup de germans.

/* Selecciona cada quart element entre qualsevol grup de germans */
:nth-child(4n) {
  color: lime;
}

Sintaxi

La pseudo-class nth-child s'especifica amb un únic argument, que representa el patró per als elements coincidents.

Valors de paraules clau

odd
Representa elements, la posició numèrica dels quals, en una sèrie de germans és imparell: 1, 3, 5, etc.
even
Representa elements, la posició numèrica dels quals, en una sèrie de germans és parell: 2, 4, 6, etc.

Notació funcional

<An+B>
Representa elements, la posició numèrica dels quals, en una sèrie de germans coincideix amb el patró An+B, per a cada enter positiu o valor zero de n. L'índex del primer element és 1. Els valors A i B han de ser <integer>s.

Sintaxi formal

:nth-child( <nth> [ of <selector># ]? )

where
<nth> = <an-plus-b> | even | odd

Exemples

Exemple de selectors

tr:nth-child(odd) or tr:nth-child(2n+1)
Representa les files imparells d'una taula HTML: 1, 3, 5, etc.
tr:nth-child(even) or tr:nth-child(2n)
Representa les files parells d'una taula HTML: 2, 4, 6, etc.
:nth-child(5n)
Representa elements 5, 10, 15, etc.
:nth-child(3n+4)
Representa elements 4, 7, 10, 13, etc.
:nth-child(-n+3)
Representa els tres primers elements entre un grup de germans.
p:nth-child(n)
Representa cada element <p> entre un grup de germans. Això és el mateix que un simple selector p .
p:nth-child(1) or p:nth-child(0n+1)
Representa cada <p> aquest és el primer element entre un grup de germans. Això és el mateix que el selector :first-child.

Exemple detallat

HTML

<h3><code>span:nth-child(2n+1)</code>, WITHOUT an
   <code>&lt;em&gt;</code> among the child elements.</h3>
<p>Children 1, 3, 5, and 7 are selected.</p>
<div class="first">
  <span>Span 1!</span>
  <span>Span 2</span>
  <span>Span 3!</span>
  <span>Span 4</span>
  <span>Span 5!</span>
  <span>Span 6</span>
  <span>Span 7!</span>
</div>

<br>

<h3><code>span:nth-child(2n+1)</code>, WITH an
   <code>&lt;em&gt;</code> among the child elements.</h3>
<p>Children 1, 5, and 7 are selected.<br>
   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>Span!</span>
  <span>Span</span>
  <em>This is an `em`.</em>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
</div>

<br>

<h3><code>span:nth-of-type(2n+1)</code>, WITH an
   <code>&lt;em&gt;</code> among the child elements.</h3>
<p>Children 1, 4, 6, and 8 are selected.<br>
   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>Span!</span>
  <span>Span</span>
  <em>This is an `em`.</em>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
  <span>Span</span>
  <span>Span!</span>
</div>

CSS

html {
  font-family: sans-serif;
}

span,
div em {
  padding: 5px;
  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;
}

Resultat

Especificacions

Especificació Estat Comentari
Selectors Level 4
The definition of ':nth-child' in that specification.
Working Draft Afegeix la sintaxi del <selector> i especifica que els elements coincidents no són necessaris per tenir un pare.
Selectors Level 3
The definition of ':nth-child' in that specification.
Recommendation Definició inicial.

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

Descripció Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Suport bàsic 1 (Yes) 3.5 (1.9.1) 9.0 9.5[1] 3.1
sintaxi del <selector> No support ? No support[2] ? ? ?
No es requereix cap pare 57 ? 51 (51)[3] ? 44 ?
Descripció Android Webview Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suport bàsic (Yes) (Yes) (Yes) 1.0 (1.9.1)[2] 9.0 9.5[1] 3.1
sintaxi del <selector> No support ? ? No support[2] ? ? ?
No es requereix cap pare 57 57 ? 51.0 (51)[3] ? 44 ?

[1] Opera no pot gestionar la inserció dinàmica dels elements

[2] Gecko encara no implementa aquesta funció. Vegeu errada 854148.

[3] Vegeu errada 1300374.

Vegeu també

Document Tags and Contributors

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