Selector de descendiente

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

En el tema anterior, aprendimos sobre el combinador de hijos, que se dirige a los hijos directos de un elemento. Ahora, exploremos los selectores de descendientes, que se denotan por un espacio en blanco. Un selector de descendientes le permite dirigirse a elementos que están anidados dentro de otro elemento en cualquier nivel, no solo a los hijos directos.

Sintaxis

selector1 selector2 {
  /* property declarations */
}

Por ejemplo,

<html>
<head>
  <title>Combinator</title>
  <style>
    div p {
      color: red;
      font-size: 2em;
    }
  </style>
</head>
<body>
  <div>
    <p>This is a paragraph.</p>
    <p>This is another paragraph.</p>
  </div>
</body>
</html>

La regla CSS anterior aplicará el estilo rojo a ambos párrafos y tendrán un tamaño de fuente de 2em.

¿Cómo se relaciona con los selectores de hijos?

Un selector de descendientes es más general que un selector de hijos. Esto significa que un selector de descendientes coincidirá con todos los elementos que son descendientes de un elemento especificado, mientras que un selector de hijos solo coincidirá con los elementos que son descendientes directos de un elemento especificado.

Por ejemplo, el selector div p coincidirá con todos los elementos p que son descendientes de un elemento div, incluyendo los elementos p que están anidados dentro de otros elementos p. El selector div > p solo coincidirá con los elementos p que son descendientes directos de un elemento div.

Desafío

Fácil

Basándonos en el ejercicio anterior, utilicemos la misma estructura HTML. Escribe una regla CSS utilizando el selector de descendientes para dar estilo a todos los párrafos dentro del elemento .list, independientemente de su nivel de anidamiento. Dales un nuevo color, tamaño y fuente según consideres oportuno.

Pruébalo tú mismo

<html>
<head>
    <title>Descendant Selector Exercise</title>
    <style>
        /* CSS Code goes here */
    </style>
</head>
<body>
<div>
    <p>This paragraph is not inside a list</p>
    <ul class="list">
        <li>
            <p>This is a paragraph inside a list item.</p>
        </li>
        <li>
            <div>
                <p>This is a paragraph inside a nested div within a list item.</p>
            </div>
        </li>
    </ul>
</div>
</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 descendienteSelector de hermano adyacente Selector de hermano general