Unidad 9. Hojas de estilo CSS. Sintaxis. Selectores (VII)

3- Selector hermanos ~

Podemos definir un selector con la condición de que una etiqueta "esté después de otra y al mismo nivel de profundidad o anidamiento" o lo que es lo mismo, "que sea un hermano" de otra. Las etiquetas que están al mismo nivel de profundidad las podemos llamar hermanas de una etiqueta previa. Un selector hermano se escribe separando las etiquetas con un carácter ~ (pulsar Alt + 126). La siguiente regla:

div ~ p { color: red  }

Para este fragmento de página:

<p>Párrafo cero </p>
<div>División <span>aulaClic</span> </div>
<div>
    <p>Párrafo <span>uno</span></p>
</div>
<p>Párrafo <span>dos</span></p>
<p>Párrafo <span>tres</span></p>

Produce el siguiente resultado:

Para explicar de forma más clara este resultado nos vamos a ayudar del siguiente esquema de árbol donde los nodos representan las etiquetas y los rectángulos punteados la relación entre los nodos. (hermanos, padre-hijo y descendientes)

Como vemos la etiqueta p que dice "Párrafo dos" y la etiqueta p que dice "Párrafo tres" se ven en color rojo porque están después de una etiqueta div y están al mismo nivel. Sin embargo la etiqueta p que dice "Párrafo cero" aunque pueda parecer que es una hermana de div , no lo es ya que no está después de div, sino antes; la etiqueta p que dice "Párrafo uno" no es una hermana, sino una hija, por eso ninguna de estas dos se ve en rojo

4- Selector hermanos contiguos +

Podemos definir un selector con la condición de que una etiqueta "esté al lado de otra y al mismo nivel de profundidad o anidamiento" o lo que es lo mismo, "que sea un hermano contiguo" de otra. Otra forma de definir un hermano contiguo es decir que es el primer hermano que está a continuación, pero no los siguientes hermanos. Un selector hermano contiguo se escribe separando las etiquetas con un carácter + (signo más). La siguiente regla:

div + p { color: red  }

Para este fragmento de página:

<p>Párrafo cero</p>
<div>División<span>aulaClic</span> </div>
<div>
    <p>Párrafo <span>uno</span></p>
</div>
<p>Párrafo <span>dos</span></p>
<p>Párrafo <span>tres</span></p>

Produce el siguiente resultado:

Para explicar de forma más clara este resultado nos vamos a ayudar del mismo esquema que en el caso anterior de hermanos.

Como vemos la etiqueta p que dice "Párrafo dos" se ve en color rojo porque es contigua a una etiqueta div y está al mismo nivel. Sin embargo la etiqueta p que dice "Párrafo cero" no está después de una etiqueta div, y la etiqueta p que dice "Párrafo uno" no es una hermana, y la última etiqueta p es una hermana pero no es contigua, por eso ninguna de estas tres etiquetas p se ve en rojo