Selectores css descendientes y hermanos

Desarrollo web

Antes de entrar de lleno en el tema veamos rápidamente a que nos referimos cuando decimos descendencia.La descendencia en css se refiere al nivel en que se encuentra un elemento HTML con respecto a otro. Por ejemplo dentro de un documento html el nivel más alto lo tiene la etiqueta body o html, partiendo de ahí los elementos que se encuentren un nivel más abajo son denominados hijos. Veamos el siguiente fragmento de código.


 <body>
 <section id='hijo-body'>
 <p>Ejemplo de descendencia</p>
 <span>Fragmento de texto</span>
 <ul>
 <li>Elemento 1
 <li>Elemento 2
 </ul>
 </section>
 <footer>Pie de página</footer>
 </body>

Analizando la estructura que tienen los elementos html notamos que...

El elemento body es padre del elemento section y del elemento footer más no de los elementos p ni span.
El elemento padre de los elementos p y span es section por lo tanto los elementos p y span son hermanos ya que están al mismo nivel uno del otro.
Los elementos footer y section son hermanos.

Es importante notar la diferencia entre hijos y descendentes.
Dentro del elemento section...

Sus hijos son los elementos que se encuentran un nivel directamente debajo de el mismo elemento section.
Sus descendientes son todos los elementos que se encuentran dentro del elemento section sean los mismos hijos o los hijos de los hijos etc. En el ejemplo los elementos li ya no son hijos del elemento section pero si son descendientes ya que son hijos de un hijo, que es el elemento ul.

Veamos ahora si los selectores

Selector descendente

elemento elemento

Selecciona cualquier elemento que sea descendente de otro elemento padre...

 
 section p{
 padding : 1rem;
 }

En el ejemplo anterior la regla css se aplica a todos los elementos p que desciendan de un elemento section.<7>

Selector hijo

elemento > elemento

Este selector es parecido al anterior solo que este selecciona a cualquier elemento que sea hijo directo de un elemento padre, no va más allá del primer nivel dentro del elemento.

 
 section > p{
 padding : 1rem;
 }

Selector de hermano proximo

elemento + elemento

Permite seleccionar un elemento específico que esta inmediatamente después de otro elemento dado siempre y cuando estén al mismo nivel, es decir que sean hermanos.

 
 p + p{
 color:red;
 }

Selector de hermano cualquiera

elemento ~ elemento

Es similar al anterior, la diferencia esta en que con este selector no necesariamente el elemento dado tiene que ser el próximo inmediato puede haber entre ellos uno o más elementos, pero mientras sean hermanos y se encuentre después y no antes el selector será aplicado.

 
 p ~ p{
 color:red;
 }

Consideremos el siguiente fragmento de código


 <div>
 <h2>Titulo</h2>
 <p>Parrafo 1</p> 
 <span>Texto cualquiera</span>
 <p>Parrafo 2</p>
 <p>Último parrafo</p> 
 </div>
 <p>Parrafo 3</p>

Al emplear el selector de hermano proximo p + p{} el elemento que se seleccionará...


 <p>Último parrafo</p>

Al emplear el selector de hermano cualquiera p ~ p{} los elementos seleccionados serán...


 <p>Parrafo 2</p>
 <p>Último parrafo</p>

Hemos visto solamente el aspecto más básico de estos selectores, por supuesto se pueden hacer tantas combinaciones sean necesarias, con selectores de clase, de id etc.