Selector de hermano adyacente CSS

El selector de hermanos adyacentes (Adjacent sibling selector) puede seleccionar un elemento que aparece inmediatamente después de otro elemento, y ambos tienen el mismo elemento padre.

Seleccionar hermanos adyacentes

Si necesita seleccionar un elemento que aparece inmediatamente después de otro elemento y ambos tienen el mismo elemento padre, puede usar el selector de hermanos adyacentes (Adjacent sibling selector).

Por ejemplo, si desea aumentar el margen superior del párrafo que aparece inmediatamente después del elemento h1, puede escribirlo así:

h1 + p {margin-top:50px;}

Este selector se lee como: "Seleccione el párrafo que aparece inmediatamente después del elemento h1, donde h1 y p tienen el mismo elemento padre."

Pruebe usted mismo

Explicación de la gramática

El selector de hermanos adyacentes utiliza el símbolo más (+), es decir, el conectador de hermanos adyacentes (Adjacent sibling combinator).

Notas:Al igual que con el conectador de subelementos, al lado del conectador de hermanos adyacentes puede haber espacios en blanco.

Por favor, vea el siguiente fragmento de árbol de documento:

<div>
  <ul>
    <li>Elemento de lista 1</li>
    <li>Elemento de lista 2</li>
    <li>Elemento de lista 3</li>
  </ul>
  <ol>
    <li>Elemento de lista 1</li>
    <li>Elemento de lista 2</li>
    <li>Elemento de lista 3</li>
  </ol>
</div>

En el fragmento anterior, el elemento div contiene dos listas: una lista desordenada y una lista ordenada, cada una con tres elementos de lista. Estas dos listas son hermanos adyacentes, y los elementos de lista también son hermanos adyacentes. Sin embargo, los elementos de lista del primer lista no son hermanos adyacentes con los elementos de lista del segundo lista, porque estos grupos de elementos de lista no pertenecen al mismo elemento padre (solo se pueden considerar primos).

Recuerde, con un solo combinador solo se puede seleccionar el segundo elemento de dos hermanos adyacentes. Vea el siguiente selector:

li + li {font-weight:bold;}

Este selector solo convertirá los segundos y terceros elementos de la lista en negrita. El primer elemento de la lista no se ve afectado.

Pruebe usted mismo

Combinación con otros selectores

El combinador de hermanos adyacentes también se puede combinar con otros combinadores:

html > body table + ul {margin-top:20px;}

Este selector se interpreta como: seleccionar todos los elementos ul que aparecen justo después de un elemento table, que se encuentra dentro de un elemento body, y el elemento body es un subelemento del elemento html.