Pseudoclase CSS :first-child
La pseudoclase CSS :first-child aplica estilos al primer hijo de su padre. Aprende la sintaxis, los errores comunes y ejemplos ejecutables.
La pseudoclase CSS :first-child selecciona un elemento que es el primer hijo de su padre. Se utiliza con mayor frecuencia para dar estilo al primer elemento de una lista, al primer párrafo de una sección, o para eliminar el margen superior o el borde del primer elemento de un grupo.
Esta página cubre la sintaxis, la regla que más confunde a la gente, varios ejemplos ejecutables y en qué se diferencia :first-child de sus selectores relacionados.
El error común: "primer hijo" no es "primero de ese tipo"
Un selector como p:first-child no significa "el primer <p> dentro del padre". Significa "un <p> que además resulta ser el primer hijo de su padre". Si un elemento diferente aparece antes del párrafo, la regla no selecciona nada.
<div>
<h2>Heading</h2>
<p>This paragraph is NOT styled — the <h2> is the first child.</p>
</div>
<div>
<p>This paragraph IS styled — it is the first child of its <div>.</p>
</div>Así que p:first-child se lee de derecha a izquierda como: selecciona <p>, pero solo cuando ese <p> es el primer hijo de su padre. Cuando quieres "el primer párrafo independientemente de lo que le preceda", usa :first-of-type en su lugar.
:first-child frente a selectores relacionados
| Selector | Coincide con |
|---|---|
:first-child | Un elemento que es el primer hijo de su padre |
:last-child | Un elemento que es el último hijo de su padre |
:first-of-type | El primer elemento de su tipo entre sus hermanos |
:only-child | Un elemento que es el único hijo de su padre |
:nth-child(n) | El hijo n-ésimo, mediante cualquier fórmula (2n, 3n+1, etc.) |
:first-child es equivalente a :nth-child(1). La diferencia clave con :first-of-type está en la condición: :first-child coincide solo si el elemento es el primer hijo de su padre, mientras que :first-of-type coincide con el primer elemento de su tipo específico entre sus hermanos, independientemente de lo que le preceda.
Versión
Sintaxis
Ejemplo de sintaxis CSS :first-child
:first-child {
css declarations;
}Ejemplos
Con la etiqueta <p>
Aquí el primer <p> es el primer hijo de <body>, por lo que recibe estilos. El segundo <p> va después de un <h2>, por lo que no los recibe.
Ejemplo de código CSS :first-child
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p:first-child {
background-color: #1c87c9;
color: #fff;
}
</style>
</head>
<body>
<p>Lorem ipsum is simply dummy text...</p>
<h2>First-child selector example</h2>
<p>Lorem Ipsum is simply dummy text...</p>
</body>
</html>Con la etiqueta <li>
li:first-child resalta el primer elemento de cada lista. Dado que tanto el <ul> como el <ol> reinician el conteo de hijos, el primer <li> de cada uno recibe el fondo.
Otro ejemplo de código CSS :first-child
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
li:first-child {
background: #8ebf42;
}
</style>
</head>
<body>
<h2>:first-child selector example</h2>
<ul>
<li>Paris</li>
<li>Moscow</li>
<li>Rome</li>
</ul>
<ol>
<li>Paris</li>
<li>Moscow</li>
<li>Rome</li>
</ol>
</body>
</html>Con la etiqueta <ol>
Dos elementos <ol> están uno al lado del otro dentro de <body>. Solo el primero es el primer hijo de <body>, por lo que solo él recibe el fondo.
Ejemplo del selector :first-child con la etiqueta HTML ol
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ol:first-child {
background: #8ebf42;
}
</style>
</head>
<body>
<ol>
<li>London</li>
<li>Paris</li>
<li>Rome</li>
</ol>
<ol>
<li>London</li>
<li>Paris</li>
<li>Rome</li>
</ol>
</body>
</html>Con la etiqueta <em>
p em:first-child selecciona un <em> solo cuando es el primer hijo de un <p>. En cada párrafo a continuación, el primer <em> va después de las palabras "Here is a", por lo que no es el primer hijo: la regla no selecciona nada. Esta es una ilustración deliberada del error común descrito anteriormente.
Ejemplo del selector :first-child con la etiqueta HTML em
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
p em:first-child {
background: #82b534;
}
</style>
</head>
<body>
<h2>:first-child selector example</h2>
<article>
<p>Here is a <em>some</em> text. This is a <em>example</em>.</p>
<p>Here is a <em>some</em> text. This is a <em>example</em>.</p>
<p>Here is a <em>some</em> text. This is a <em>example</em>.</p>
</article>
</body>
</html>Con la etiqueta <ul>
:first-child funciona en cada nivel de anidamiento. El primer elemento de la lista exterior y el primer elemento de la lista anidada coinciden con ul li:first-child.
Ejemplo del selector :first-child con la etiqueta HTML ul
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
ul li {
color: blue;
}
ul li:first-child {
color: #8ebf42;
font-weight: bold;
}
</style>
</head>
<body>
<h2>:first-child selector example</h2>
<ul>
<li>List Item 1</li>
<li>List Item 2</li>
<li>
List Item 3
<ul>
<li>List Item 3.1</li>
<li>List Item 3.2</li>
<li>List Item 3.3</li>
</ul>
</li>
</ul>
</body>
</html>Compatibilidad con navegadores
:first-child es compatible con todos los navegadores modernos y funciona en Internet Explorer 9 y versiones posteriores. Forma parte de CSS Level 2 y no ha cambiado en Selectors Level 3 ni Level 4, por lo que puedes usarlo sin ningún prefijo de proveedor.
Selectores relacionados
:last-child— aplica estilos al último elemento de un grupo:first-of-type— el primer elemento de un tipo dado, independientemente de lo que le preceda:only-child— selecciona un elemento que no tiene hermanos:nth-child()— selecciona por posición mediante una fórmula (:first-childequivale a:nth-child(1))