Él :last-childCSSpseudo-clase representa el último elemento entre un grupo de elementos hermanos.

/* Selects any 
 that is the last element
   among its siblings */p:last-childcolor: lime;

Nota: Como se definió originalmente, el elemento seleccionado tenía que tener un padre. A partir del nivel 4 de selectores, esto ya no es necesario.

Sintaxis

:last-child

Ejemplos

Ejemplo básico

HTML

<div><p>This text isn't selected.p><p>This text is selected!p>div><div><p>This text isn't selected.p><h2>This text isn't selected: it's not a `p`.h2>div>

CSS

p:last-childcolor: lime;background-color: black;padding: 5px;

Resultado

Dar estilo a una lista

HTML

<ul><li>Item 1li><li>Item 2li><li>Item 3
    <ul><li>Item 3.1li><li>Item 3.2li><li>Item 3.3li>ul>li>ul>

CSS

ul licolor: blue;ul li:last-childborder: 1px solid red;color: red;

Resultado

Especificaciones

Especificación Estado Comentario
Selectores Nivel 4
La definición de ‘:last-child’ en esa especificación.		 Borrador de Trabajo No es necesario que los elementos coincidentes tengan un padre.
Selectores Nivel 3
La definición de ‘:last-child’ en esa especificación.		 Recomendación Definición inicial.

Compatibilidad del navegador

Escritorio Móvil
Cromo Borde Firefox explorador de Internet Ópera Safari WebView Android cromo androide Firefox para Android Ópera Android Safari en IOS Samsung Internet
:last-child 1 12 1 9 9.5 3.2 ≤37 18 4 10.1 3.2 1.0
no_parent_required 57 79 52 No 44 No 57 57 52 43 No 7.0

Ver también

  • :-moz-last-node Esta API no ha sido estandarizada.
  • :last-of-type
  • :first-child
  • :nth-child