¿Cuál es la diferencia entre selectores descendientes (div p) y selectores de hijo directo (div > p)?

La diferencia fundamental entre el selector descendiente (representado por un espacio, como div p) y el selector de hijo directo (representado por el signo mayor que >, como div > p) en CSS radica en la especificidad de la relación jerárquica que establecen entre los elementos HTML:

1. Selector Descendiente (ej. div p):
   • Qué selecciona: Este selector es más general. Selecciona todos los elementos p que son descendientes de un elemento div, sin importar cuántos niveles de anidamiento haya entre el div (ancestro) y el p (descendiente). Un descendiente puede ser un hijo directo, un nieto, un bisnieto, etc.
   • Ejemplo: Si tienes la estructura <div> <article> <p>Texto</p> </article> </div>, el selector div p seleccionaría el elemento <p> porque es un descendiente del <div>, aunque no sea su hijo directo.
2. Selector de Hijo Directo (ej. div > p):
   • Qué selecciona: Este selector es mucho más específico. Selecciona únicamente los elementos p que son hijos directos (es decir, que están en el primer nivel de anidamiento) de un elemento div. No seleccionará elementos p que estén anidados más profundamente dentro de otros elementos que a su vez sean hijos del div.
   • Ejemplo: En la estructura <div> <p>Hijo directo</p> <article> <p>Nieto</p> </article> </div>:
     • div > p seleccionaría solo el primer <p> (el que dice "Hijo directo").
     • No seleccionaría el segundo <p> (el que dice "Nieto"), porque este es hijo de <article>, no directamente de <div>. (Sin embargo, div p sí seleccionaría ambos párrafos).

Cuándo usar cada uno:

• Usa el selector descendiente (div p) cuando quieras aplicar un estilo a todos los elementos de un tipo específico que se encuentren en cualquier parte dentro de otro elemento, sin importar su profundidad de anidamiento. Es útil para estilos generales dentro de una sección.
• Usa el selector de hijo directo (div > p) cuando necesites un control más preciso y quieras aplicar estilos únicamente a los hijos inmediatos de un elemento, evitando que esos estilos se apliquen accidentalmente a elementos más anidados. Esto es especialmente útil para componentes con una estructura bien definida o para evitar la herencia no deseada de estilos en cascada a través de múltiples niveles.

Ejemplo Práctico en CSS:

<div class="contenedor">
  <p>Este es un párrafo hijo directo del div.</p> <ul>
    <li>
      <p>Este es un párrafo nieto del div (hijo de li).</p> </li>
  </ul>
</div>
Lenguaje del código: PHP (php)

CSS

/* Estilo para CUALQUIER párrafo descendiente de .contenedor */
.contenedor p {
  color: blue;
}

/* Estilo SOLO para párrafos que son HIJOS DIRECTOS de .contenedor */
.contenedor > p {
  font-weight: bold; /* Solo el primer párrafo será negrita */
  border-left: 3px solid blue;
}Lenguaje del código: PHP (php)

En este ejemplo, ambos párrafos serían azules, pero solo el primer párrafo («Este es un párrafo hijo directo del div.») sería además negrita y tendría el borde izquierdo, porque es el único hijo directo de .contenedor.