Clase pseudo CSS :last-child
La clase pseudo CSS :last-child selecciona el elemento si es el último hijo entre los demás elementos.
El selector :last-of-type se puede usar si el usuario desea seleccionar y aplicar el estilo al último párrafo, independientemente de si es el último hijo o no.
INFO
Originalmente, el elemento seleccionado debía tener un padre. En Selectors Level 4, esto ya no es obligatorio.
Versión
Sintaxis
Sintaxis de CSS :last-child
css
:last-child {
css declarations;
}Ejemplo del selector :last-child:
Ejemplo de código CSS :last-child
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:last-child {
background-color: #1c87c9;
color: #ffffff;
}
</style>
</head>
<body>
<h2>Last-child selector example</h2>
<p>Lorem ipsum is simply dummy text...</p>
<p>Lorem Ipsum is simply dummy text...</p>
</body>
</html>Ejemplo del último hijo de la etiqueta <li>:
:last-child otro ejemplo de código
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
li:last-child {
background: #1c87c9;
}
</style>
</head>
<body>
<h2>:last-child selector example</h2>
<ul>
<li>Paris</li>
<li>Moscow</li>
<li>Rome</li>
</ul>
<ol>
<li>Paris</li>
<li>Moscow</li>
<li>Rome</li>
</ol>
</body>
</html>Ejemplo del último hijo de la etiqueta <p>:
:last-child segundo ejemplo de código
html
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:last-child {
background: #8ebf42;
}
</style>
</head>
<body>
<h2>:last-child selector example</h2>
<p>Paragraph 1</p>
<p>Paragraph 2</p>
<p>Paragraph 3</p>
<p>Paragraph 4</p>
</body>
</html>Ejemplo de :last-child para listas HTML:
Ejemplo de la clase pseudo CSS :last-child
html
<!DOCTYPE html>
<html>
<head>
<style>
ul li {
color: #8ebf42;
}
ul li:last-child {
border: 1px dotted #8ebf42;
color: #1c87c9;
}
</style>
</head>
<body>
<h2>:last-child selector example</h2>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>
List Item 3
<ul>
<li>List Item 3.1</li>
<li>List Item 3.2</li>
<li>List Item 3.3</li>
</ul>
</li>
</ul>
</body>
</html>Práctica
¿Qué representa la clase pseudo CSS :last-child?