--- title: ':nth-last-child' slug: 'Web/CSS/:nth-last-child' tags: - CSS - Layout - Pseudo-class - Reference - Web translation_of: 'Web/CSS/:nth-last-child' ---
{{CSSRef}}

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 {{Cssxref(":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 {{cssxref("<integer>")}}s.

Sintaxi formal

{{csssyntax}}

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 {{cssxref(":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

{{EmbedLiveSample('Table_example', 300, 150)}}

Especificacions

Especificació Estat Comentari
{{SpecName('CSS4 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}} {{Spec2('CSS4 Selectors')}} No es requereix que els elements coincidents tinguin un pare.
{{SpecName('CSS3 Selectors', '#nth-last-child-pseudo', ':nth-last-child')}} {{Spec2('CSS3 Selectors')}} Definició inicial.

{{CompatibilityTable}}

Descripció Chrome Edge Firefox (Gecko) Internet Explorer Opera Safari
Suport bàsic {{CompatChrome(4)}} {{CompatVersionUnknown}} {{CompatGeckoDesktop("1.9.1")}} 9.0 {{CompatOpera(9.5)}} 3.2
No es requereix cap pare {{CompatChrome(57)}} {{CompatUnknown}} {{CompatGeckoDesktop("51")}}[1] {{CompatUnknown}} {{CompatOpera(44)}} {{CompatUnknown}}
Descripció Android Webview Chrome for Android Edge Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Suport bàsic {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatVersionUnknown}} {{CompatGeckoMobile("1.9.1")}} 9.0 {{CompatOperaMobile(10)}} 3.2
No es requereix cap pare {{CompatChrome(57)}} {{CompatChrome(57)}} {{CompatUnknown}} {{CompatGeckoMobile("51")}}[1] {{CompatUnknown}} {{CompatOperaMobile(44)}} {{CompatUnknown}}

[1] Veure {{bug(1300374)}}.

Vegeu també