:first-child
Baseline Widely available *
This feature is well established and works across many devices and browser versions. It’s been available across browsers since julio de 2015.
* Some parts of this feature may have varying levels of support.
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
Error: could not find syntax for this itemEjemplos
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
| Specification |
|---|
| Selectors Level 4 # first-child-pseudo |