Selector de hijo

Lección 7 de 15 del curso Selectores CSS de Coddy.

Un selector de hijos es un tipo de selector CSS que selecciona todos los elementos que son hijos directos de un elemento especificado. El selector de hijos se denota mediante un signo de mayor que (>) entre dos selectores.

Ejemplo:

Considera la siguiente estructura HTML:

<div class="parent">
   <p>This is a direct child paragraph.</p>
   <div>
       <p>This is an indirect child paragraph.</p>
   </div>
</div>

Para dirigirse al párrafo que es hijo directo, usaría el combinador de hijos de la siguiente manera:

.parent > p {
    color: blue;
}

En este ejemplo, solo el párrafo que es hijo directo se volverá azul, no el que está anidado dentro del <div> interno.

Los selectores de hijos también se pueden usar para evitar aplicar estilos a elementos que no son hijos directos de un elemento especificado. Por ejemplo, podrías usar un selector de hijos para que todos los enlaces que son hijos directos de un elemento p sean de color rojo.

Desafío

Fácil

Dada la siguiente estructura HTML, crea una regla CSS utilizando el combinador de hijos para dar estilo a los elementos de lista directos dentro del elemento <ul> para que tengan un color de fondo yellow.

Pruébalo tú mismo

<html>
<head>
  <title>Child Selector Exercise</title>
  <style>
    /* CSS Code goes here */
  </style>
</head>
<body>
  <ul class="list">
    <li>This is a direct list item.</li>
    <div>
        <li>This is an indirect list item.</li>
    </div>
</ul>
</body>
</html>

Todas las lecciones de Selectores CSS

1Introducción a los selectores CSS

Propósito de los selectores CSS ¿Por qué son importantes?

4Selectores de atributos

Introducción a los selectores de atributos Presencia y valores exactos Selectores de valor de atributo Selectores de valor de atributo II Selectores de valor de atributo III

2Selectores simples

Selectores de tipo Selectores de clase Selectores de ID Selectores universales

3Selectores combinadores

Selector de hijoSelector de descendiente Selector de hermano adyacente Selector de hermano general