:first-child
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á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á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án
