Seleccionando el primer hijo

Parte de la sección CSS Mastery del Journey de HTML de Coddy — lección 13 de 43.

La pseudo-clase :first-child selecciona el primer elemento de un grupo de elementos hermanos.

Por ejemplo:

<section>
  <p>This paragraph will be blue and bold.</p>
  <p>This paragraph will have default styling.</p>
</section>

Cualquier párrafo que sea el primer elemento hijo dentro de su padre se coloreará de azul y tendrá el texto en negrita.

p:first-child {
  color: blue;
  font-weight: bold;
}

Puedes combinar y aplicar selectores descendientes, hijos y otros para dirigirte a elementos de manera más específica. Aquí tienes otro ejemplo:

div:first-child h1 {
 color: red;
}

Esto selecciona el primer elemento div entre sus hermanos, y luego cambia el color del texto de la etiqueta <h1> dentro de él a rojo.

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.

Desafío

Fácil

Crea una regla CSS que seleccione el primer elemento de lista (<li>) en cualquier lista no ordenada (<ul>) y aplícale los siguientes estilos:

Color de texto blue
Un color de fondo lightyellow
Un relleno izquierdo de 10 píxeles

Hoja de referencia

La pseudoclase :first-child selecciona el primer elemento entre un grupo de elementos hermanos.

p:first-child {
  color: blue;
  font-weight: bold;
}

Puedes combinar :first-child con otros selectores para una selección más específica:

div:first-child h1 {
  color: red;
}

Esto selecciona el primer elemento div entre sus hermanos, y luego apunta a la etiqueta h1 dentro de él.

Pruébalo tú mismo

<!DOCTYPE html>
<html>
<head>
    <title>Targeting the First Child</title>
  <style>
    /* Write your CSS rule here */
    
  </style>
</head>
<body>
  <h2>Grocery List</h2>
  <ul>
    <li>Fresh Apples</li>
    <li>Organic Bananas</li>
    <li>Whole Wheat Bread</li>
  </ul>
  
  <h2>To-Do List for the Day</h2>
  <ul>
    <li>Complete coding challenge</li>
    <li>Go for a walk in the park</li>
  </ul>
</body>
</html>

Ponte a prueba

Esta lección incluye un breve cuestionario. Empieza la lección para responderlo y registrar tu progreso.