:last-child

bit bitcode css

last-child es una pseudo-clase que selecciona al último elemento en un grupo de hermanos.

/* Selecciona el último elemento */
li:last-child {
  background: yellow;
}

El grupo de hermanos deben ser hijos del mismo padre, por lo que la estructura HTML debe ser construida de la siguiente forma:

<div>
  <p>Elemento 01</p>
  <p>Elemento 02</p>
  <p>Elemento 03</p>
  <p>Elemento 04</p>
</div>

En lugar de utilizar una clase, se puede utilizar :last-child y seleccionar el último elemento.

div p:last-child {
  background: yellow;
}

Para seleccionar un elemento este debe de cumplir con la relación establecida, de lo contrario no habrá ningún efecto.

.content .item:last-child {
  background: yellow;
}

<div class="content">
  <div class="item">Elemento 01</div>
  <div class="item">Elemento 02</div>
  <div class="item">Elemento 03</div>
  <div class="item">Elemento 04</div>
  <div class="item">Elemento 05</div> <!-- Selecciona el elemento -->
</div>

<!-- No selecciona ningún elemento -->
<div class="content">
  <div>Elemento 01</div>
  <div>Elemento 02</div>
  <div>Elemento 03</div>
  <div>Elemento 04</div>
  <div>Elemento 05</div>
</div>

<div class="content">
  <div>Elemento 01</div>
  <p>Elemento 02</p>
  <p class="item">Elemento 03</p>
  <div class="item">Elemento 04</div>
  <div class="item">Elemento 05</div> <!-- Selecciona el elemento -->
</div>

<!-- No selecciona ningún elemento -->
<div class="content">
  <div class="item">Elemento 01</div>
  <div class="item">Elemento 02</div>
  <div class="item">Elemento 03</div>
  <div class="item">Elemento 04</div>
  <div>Elemento 05</div>
</div>

Te puede interesar

nth-child
nth-child() es una pseudo-clase que selecciona a los elementos en un grupo dehermanos que coinciden con el patrón especificado. /* Tercer elemento */li:nth-child(3) { background: red;} /* Todos los elementos pares */li:nth-child(2n) { background: green;} /* Todos los elementos impare…
Fili SantillánFili Santillán
nth-of-type
nth-of-type es una pseudo-clase que selecciona a los elementos en un grupo dehermanos que coinciden con el patrón especificado y su ordenamiento de origen. /* Tercer elemento <p> */p:nth-of-type(3) { background: red;} /* Todos los elementos impares <p> */p:nth-of-type(2n+1) { background: b…
Fili SantillánFili Santillán
first-child
first-child es una pseudo-clase que selecciona al primer elemento en un grupo dehermanos. /* Selecciona el primer elemento */li:first-child { background: yellow;} El grupo de hermanos deben ser hijos del mismo padre, por lo que la estructuraHTML debe ser construida de la siguiente forma: <d…
Fili SantillánFili Santillán

Recursos