:nth-last-child
===============

La pseudo-clase **`:nth-last-child()`** de CSS selecciona uno o más elementos en función de su posición entre un grupo de hermanos, contando desde el final.


```css
/\* Selecciona cada cuarto elemento entre
 cualquier grupo de hermanos, contando
 hacia atrás desde el último \*/
:nth-last-child(4n) {
  color: lime;
}
```


**Nota:** Esta pseudo-clase es esencialmente la misma que `:nth-child`, excepto que cuenta los elementos hacia atrás desde el final, no hacia adelante desde el principio.

Sintaxis
--------

La pseudo-clase `nth-last-child` se especifica con un solo argumento, que representa el patrón para los elementos coincidentes, contando desde el final.

### Valores de palabras clave

`odd`

Representa elementos cuya posición numérica en una serie de hermanos es impar: 1, 3, 5, etc., contando desde el final.

`even`

Representa elementos cuya posición numérica en una serie de hermanos es par: 2, 4, 6, etc., contando desde el final.

### Notación funcional

`<An+B>`

Representa elementos cuya posición numérica en una serie de hermanos coincide con el patrón `An+B`, para cada entero positivo o valor cero de `n`. El índice del primer elemento, contando desde el final, es `1`. Los valores `A` y `B` deben ser ambos `<integer>`.

### Sintaxis formal

Error: could not find syntax for this itemEjemplos
--------

### Selectores de ejemplo

`tr:nth-last-child(odd)` o `tr:nth-last-child(2n+1)`

Representa las filas impares de una tabla HTML: 1, 3, 5, etc., contando desde el final.

`tr:nth-last-child(even)` o `tr:nth-last-child(2n)`

Representa las filas pares de una tabla HTML: 2, 4, 6, etc., contando desde el final.

`:nth-last-child(7)`

Representa el séptimo elemento, contando desde el final.

`:nth-last-child(5n)`

Representa los elementos 5, 10, 15, etc., contando desde el final.

`:nth-last-child(3n+4)`

Representa los elementos 4, 7, 10, 13, etc., contando desde el final.

`:nth-last-child(-n+3)`

Representa los últimos tres elementos entre un grupo de hermanos.

`p:nth-last-child(n)`

Representa cada elemento `<p>` entre un grupo de hermanos. Esto es lo mismo que un simple selector `p`.

`p:nth-last-child(1)` or `p:nth-last-child(0n+1)`

Representa cada `<p>` que es el primer elemento entre un grupo de hermanos, contando desde el final. Esto es lo mismo que el selector `:last-child`.

### Ejemplo de tabla

#### HTML


```html
<table>
  <tbody>
    <tr>
      <td>Primera línea</td>
    </tr>
    <tr>
      <td>Segunda línea</td>
    </tr>
    <tr>
      <td>Tercera línea</td>
    </tr>
    <tr>
      <td>Cuarta línea</td>
    </tr>
    <tr>
      <td>Quinta línea</td>
    </tr>
  </tbody>
</table>
```


#### CSS


```css
table {
  border: 1px solid blue;
}

/\* Selecciona los últimos tres elementos \*/
tr:nth-last-child(-n + 3) {
  background-color: pink;
}

/\* Toma todos los elementos a partir del penúltimo elemento \*/
tr:nth-last-child(n + 2) {
  color: blue;
}

/\* Seleccione solo el penúltimo elemento \*/
tr:nth-last-child(2) {
  font-weight: 600;
}
```


#### Resultado

### Ejemplo de caso Edge

Como `n` comienza en cero, mientras que el último elemento comienza en uno, `n` y `n+1` seleccionarán los mismos elementos.

#### HTML


```html
<table>
  <tbody>
    <tr>
      <td>Primera línea</td>
    </tr>
    <tr>
      <td>Segunda línea</td>
    </tr>
    <tr>
      <td>Tercera línea</td>
    </tr>
  </tbody>
</table>
```


#### CSS


```css
tr:nth-last-child(n) {
  background-color: lightgray;
}

tr:nth-last-child(n + 1) {
  font-weight: 600;
}
```


#### Resultado

Especificaciones
----------------

| Specification |
| --- |
| Selectors Level 4 # nth-last-child-pseudo |

Compatibilidad con navegadores
------------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Ver también
-----------

* `:nth-child`, `:nth-last-of-type`