Clase pseudo :first-child de CSS
La clase pseudo :first-child de CSS selecciona el elemento si es el primer hijo entre otros elementos.
El selector :first-of-type se puede utilizar si el usuario desea seleccionar y aplicar el estilo al primer párrafo. El selector :first-child es en realidad similar a :first-of-type, pero existe una diferencia: coinciden con condiciones diferentes. :first-child coincide con un elemento solo si 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.
Versión
Sintaxis
Ejemplo de sintaxis de CSS :first-child
:first-child {
css declarations;
}Ejemplo de la clase pseudo :first-child con la etiqueta <p>:
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>Ejemplo de la clase pseudo :first-child con la etiqueta <li>:
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>Ejemplo de la clase pseudo :first-child con la etiqueta <ol>:
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>Ejemplo de la clase pseudo :first-child con la etiqueta <em>:
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>Ejemplo de la clase pseudo :first-child con la etiqueta <ul>:
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>Práctica
¿Qué representa la clase pseudo :first-child en CSS?