English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

manual de referencia de CSS

CSS @reglas (RULES)

大全 de propiedades CSS

CSS :first-pseudoelemento hijo

:first-pseudoelemento hijo CSS-class representa el primer elemento en un grupo de elementos hermanos.

Manual de referencia de selectores CSS completos

Ejemplo en línea

Coincide con el primer <p> del elemento padre de <p>.

!DOCTYPE html
<html>
<head>
<meta charset="utf-8">　
<title>Manual básico(oldtoolbag.com)</title>　
<style>
p:first-child
{
　　　　background-color:orange;
}
</style>
</head>
<body>
<p>El primer párrafo del contenido principal.</p>
<h1>Bienvenido a mi página personal</h1>
<p>Este párrafo no es el primer hijo de su padre.</p>
<div>
<p>Este es el primer párrafo contenido dentro de Div.</p>
<p>No es el primer párrafo.</p>
</div>
<p><b>Nota:</b> :first-child actúa en IE8y versiones de navegadores más antiguas, el DOCTYPE debe haber sido declarado.</p>
</body>
</html>
Prueba y mira ‹/›

Definición y uso

:first-El selector child coincide con el primer elemento hijo del elemento padre.

Compatibilidad del navegador

Los números en la tabla indican la versión del navegador que admite el atributo por primera vez.

Selector




:first-child4.07.03.03.19.6

Nota: :first-child en IE8y versiones de IE más antiguas deben declararse!DOCTYPE

Artículos relacionados

Tutorial CSS: Pseudoclases CSS

Ejemplo en línea

Elegir cada <i> elemento dentro de cada <p> y establecer su estilo, donde el <p> es el primer hijo del elemento padre:

!DOCTYPE html
<html>
<head>
<meta charset="utf-8">　
<title>Manual básico(oldtoolbag.com)</title>　
<style>
p:first-child i
{
　　　　background:yellow;
}
</style>
</head>
<body>
<p>Soy un <i>fuerte</i> hombre. Soy un <i>fuerte</i> hombre.</p>
<p>Soy un <i>fuerte</i> hombre. Soy un <i>fuerte</i> hombre.</p>
<p><b>Nota:</b> :first-child actúa en IE8y versiones de navegadores más antiguas, el DOCTYPE debe haber sido declarado.</p>
</body>
</html>
Prueba y mira ‹/›

Ejemplo en línea

Estilo seleccionado para el primer <li> elemento de la lista:

!DOCTYPE html
<html>
<head>
<meta charset="utf-8">　
<title>Manual básico(oldtoolbag.com)</title>　
<style>
li:first-child
{
　　　　background:yellow;
}　
</style>
</head>
<body>
<ul>
　　<li>Coffee</li>
　　<li>Tea</li>
　　<li>Coca Cola</li>
</ul>
<ol>
　　<li>Coffee</li>
　　<li>Tea</li>
　　<li>Coca Cola</li>
</ol>
<p><b>Nota:</b> :first-child actúa en IE8y versiones de navegadores más antiguas, el DOCTYPE debe haber sido declarado</p>
</body>
</html>
Prueba y mira ‹/›

Ejemplo en línea

Estilo seleccionado para el primer elemento hijo de cada <ul> element::

!DOCTYPE html
<html>
<head>
<meta charset="utf-8">　
<title>Manual básico(oldtoolbag.com)</title>　
<style>
ul>:first-child
{
　　　　background:yellow;
}
</style>
</head>
<body>
<ul>
　　<li>Coffee</li>
　　<li>Tea</li>
　　<li>Coca Cola</li>
</ul>
<ul>
　　<li>Coffee</li>
　　<li>Tea</li>
　　<li>Coca Cola</li>
</ul>
<p><b>Nota:</b> :first-child actúa en IE8y versiones de navegadores más antiguas, el DOCTYPE debe haber sido declarado.</p>
</body>
</html>
Prueba y mira ‹/›

Manual de referencia de selectores CSS completos

Funciones CSSManual completo de selectores CSS