En este artículo, aprenderemos a seleccionar el «último hijo» con un nombre de clase específico en CSS .
Enfoque: El selector CSS :last-child se usa para apuntar al último elemento secundario de su padre para darle estilo.
Sintaxis:
:last-child {
// CSS property
}
Ejemplo 1: El siguiente ejemplo muestra un div HTML con cuatro párrafos . Los dos primeros párrafos muestran un color de fondo «gris» y los dos últimos párrafos muestran un color de fondo «amarillo» .
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.greyClass {
background-color: grey;
}
.yellowClass {
background-color: yellow;
}
</style>
</head>
<body>
<h2 style="color:green;">
GeeksforGeeks
</h2>
<b>Last child </b>
<div id="divID">
<p class="greyClass">
This paragraph 1 is within
greyClass class.
</p>
<p class="greyClass">
This paragraph 2 is within
greyClass class.
</p>
<p class="yellowClass">
This paragraph 3 is within
yellowClass class.
</p>
<p class="yellowClass">
This paragraph 4 is last child
and within yellowClass class
</p>
</div>
</body>
</html>
Producción:
Ejemplo 2: El siguiente código muestra la selección del último hijo con una clase específica. Consulte la salida que muestra el último niño con un color «azul» en lugar de tener el color de la clase «clase amarilla».
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.greyClass {
background-color: grey;
}
.yellowClass {
background-color: yellow;
}
.yellowClass:last-child {
background-color: blue;
}
</style>
</head>
<body>
<h2 style="color:green;">
GeeksforGeeks
</h2>
<b>Last child with class name</b>
<div id="divID">
<p class="greyClass">
This paragraph 1 is within
greyClass class.
</p>
<p class="greyClass">
This paragraph 2 is within
greyClass class.
</p>
<p class="yellowClass">
This paragraph 3 is within
yellowClass class.
</p>
<p class="yellowClass"> T
his paragraph 4 is last child
and within yellowClass class
</p>
</div>
</body>
</html>
Producción:
Ejemplo 3: El siguiente código muestra otra forma de seleccionar el último hijo del div HTML.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.greyClass {
background-color: grey;
}
.yellowClass {
background-color: yellow;
}
#paraID.yellowClass:last-child {
background-color: blue;
}
</style>
</head>
<body>
<h2 style="color:green;">
GeeksforGeeks
</h2>
<b>Last child with class name</b>
<div id="divID">
<div id="greyDiv">
<p class="greyClass">
This paragraph 1 is within
greyClass class.
</p>
<p class="greyClass">
This paragraph 2 is within
greyClass class.
</p>
</div>
<div id="yellowDiv">
<p class="yellowClass">
This paragraph 3 is within
yellowClass class.
</p>
<p id="paraID" class="yellowClass">
This paragraph 4 is last child
and within yellowClass class.
</p>
</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por geetanjali16 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA