:first-child
Baseline
Ampliamente disponible
*
Esta característica está consolidada y funciona en muchos dispositivos y versiones de navegador. Está disponible en todos los navegadores desde julio de 2015.
* Algunas partes de esta característica pueden tener distintos niveles de compatibilidad.
La pseudo-clase :first-child de CSS representa el primer elemento entre un grupo de elementos hermanos.
css
/* Selecciona cualquier <p> que sea el primer
elemento entre sus hermanos */
p:first-child {
color: lime;
}
Nota: Como se definió originalmente, el elemento seleccionado tenía que tener un padre. Comenzando con el Nivel 4 de Selectores, esto ya no es necesario.
Sintaxis
css
:first-child {
/* ... */
}
Ejemplos
Ejemplo básico
HTML
html
<div>
<p>¡Este texto está seleccionado!</p>
<p>Este texto no está seleccionado.</p>
</div>
<div>
<h2>Este texto no está seleccionado: no es un `p`.</h2>
<p>Este texto no está seleccionado.</p>
</div>
CSS
css
p:first-child {
color: lime;
background-color: black;
padding: 5px;
}
Resultado
Diseñando una lista
HTML
html
<ul>
<li>Objeto 1</li>
<li>Objeto 2</li>
<li>
Objeto 3
<ul>
<li>Objeto 3.1</li>
<li>Objeto 3.2</li>
<li>Objeto 3.3</li>
</ul>
</li>
</ul>
CSS
css
ul li {
color: blue;
}
ul li:first-child {
color: red;
font-weight: bold;
}
Resultado
Especificaciones
| Especificación |
|---|
| Selectors Level 4 # first-child-pseudo |