:last-child

Baseline Widely available *

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

* Some parts of this feature may have varying levels of support.

La pseudo-clase :last-child de CSS representa el último elemento entre un grupo de elementos hermanos.

css
/* Selecciona cualquier 
 que sea el último elemento
   entre sus hermanos */
p:last-child {
  color: lime;
}

Nota: Como se definió originalmente, el elemento seleccionado tenía que tener un padre. Comenzando con el Nivel 4 de Selectores, esto ya no es necesario.

Sintaxis

Error: could not find syntax for this item

Ejemplo

Ejemplo básico

HTML

html

  
Este texto no está seleccionado.

  
¡Este texto está seleccionado!






  
Este texto no está seleccionado.

  
Este texto no está seleccionado: no es un `p`.

CSS

css
p:last-child {
  color: lime;
  background-color: black;
  padding: 5px;
}

Resultado

Diseñando una lista

HTML

html
    
  
  • Artículo 1
    • 
  
  • Artículo 2
    • 
  
  • 
    Artículo 3
    
      
      
    • Artículo 3.1
      • 
      
    • Artículo 3.2
      • 
      
    • Artículo 3.3
      • 
    
    
  
    •

CSS

css
ul li {
  color: blue;
}

ul li:last-child {
  border: 1px solid red;
  color: red;
}

Resultado

Especificaciones

Specification
Selectors Level 4
# the-last-child-pseudo

Compatibilidad con navegadores

Ver también