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-last-child() coincideix amb un o més elements en funció de la seva posició entre un grup de germans, comptant des del final.

/* Selecciona cada quart element entre qualsevol grup de germans, comptant enrere des de l'últim */
:nth-last-child(4n) {
  color: lime;
}

Nota: Aquesta pseudo-class és bàsicament la mateixa que :nth-child, excepte que compta els elements a l'inrevés des del final i no des del començament.

Sintaxi

The nth-last-child pseudo-class is specified with a single argument, which represents the pattern for matching elements, counting from the end.

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., comptant des del final.
even
Representa elements, la posició numèrica dels quals, en una sèrie de germans és parell: 2, 4, 6, etc., comptant des del final.

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, comptant des del final, és 1. Els valors A i B han de ser dos <integer>s.

Sintaxi formal

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

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

Exemples

Exemple de selectors

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

Exemple de taula

HTML

<table>
  <tbody>
    <tr>
      <td>First line</td>
    </tr>
    <tr>
      <td>Second line</td>
    </tr>
    <tr>
      <td>Third line</td>
    </tr>
    <tr>
      <td>Fourth line</td>
    </tr>
    <tr>
      <td>Fifth line</td>
    </tr>
  </tbody>
</table>

CSS

table {
  border: 1px solid blue;
}

/* Selects the last three elements */
tr:nth-last-child(-n+3) {
  background-color: pink;
}

Resultat

Especificacions

Especificació Estat Comentari
Selectors Level 4
The definition of ':nth-last-child' in that specification.
Working Draft No es requereix que els elements coincidents tinguin un pare.
Selectors Level 3
The definition of ':nth-last-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 4 (Yes) 3.5 (1.9.1) 9.0 9.5 3.2
No es requereix cap pare 57 ? 51 (51)[1] ? 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) 9.0 10 3.2
No es requereix cap pare 57 57 ? 51.0 (51)[1] ? 44 ?

[1] Veure errada 1300374.

Vegeu també

Document Tags and Contributors

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