:first-child

bit bitcode css

first-child es una pseudo-clase que selecciona al primer elemento en un grupo de hermanos.

/* Selecciona el primer elemento */
li:first-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 :first-child y seleccionar el primer elemento.

div p:first-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:first-child {
  background: yellow;
}

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

<!-- No selecciona ningún elemento -->
<div class="content">
  <p>Elemento 01</p>
  <div class="item">Elemento 02</div>
  <div class="item">Elemento 03</div>
  <div class="item">Elemento 04</div>
  <div class="item">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
last-child
last-child es una pseudo-clase que selecciona al último elemento en un grupo dehermanos. /* Selecciona el último elemento */li:last-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: <div…
Fili SantillánFili Santillán

Recursos