:nth-last-child

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;
}

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 <complex-selector-list> ]? )
where 
<nth> = <an-plus-b> | even | odd
<complex-selector-list> = <complex-selector>#
where 
<complex-selector> = <compound-selector> [ <combinator>? <compound-selector> ]*
where 
<compound-selector> = [ <type-selector>? <subclass-selector>* [ <pseudo-element-selector> <pseudo-class-selector>* ]* ]!
<combinator> = '>' | '+' | '~' | [ '||' ]
where 
<type-selector> = <wq-name> | <ns-prefix>? '*'
<subclass-selector> = <id-selector> | <class-selector> | <attribute-selector> | <pseudo-class-selector>
<pseudo-element-selector> = ':' <pseudo-class-selector>
<pseudo-class-selector> = ':' <ident-token> | ':' <function-token> <any-value> ')'
where 
<wq-name> = <ns-prefix>? <ident-token>
<ns-prefix> = [ <ident-token> | '*' ]?  | 
<id-selector> = <hash-token>
<class-selector> = '.' <ident-token>
<attribute-selector> = '[' <wq-name> ']' | '[' <wq-name> <attr-matcher> [ <string-token> | <ident-token> ] <attr-modifier>? ']'
where 
<attr-matcher> = [ '~' |  |  | '^' | '$' | '*' ]? '='
<attr-modifier> = i | s

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

Navegadors compatibles

[1] Veure errada 1300374.

Vegeu també

• :nth-child, :nth-last-of-type