Selector de hermano adyacente

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

Sumerjámonos en los selectores de hermanos adyacentes. Estos selectores se dirigen a elementos que comparten el mismo padre y aparecen inmediatamente después del elemento seleccionado. Un selector de hermano adyacente es un selector CSS que selecciona todos los elementos que son hermanos de un elemento especificado y están inmediatamente adyacentes a él. El selector de hermano adyacente se denota con un signo más (+) entre dos selectores.

Sintaxis

former_element + target_element {
  /* style properties */
}

Supongamos que tenemos esta estructura HTML:

<div class="container">
   <p>First paragraph</p>
   <span>Adjacent span</span>
   <p>Second paragraph</p>
</div>

Para dar estilo al <span> que sigue inmediatamente a un párrafo, usarías el selector de hermano adyacente:

p + span {
   font-weight: bold;
}

En este caso, el "Adjacent span" tendrá un peso de fuente negrita.

Desafío

Fácil

Crea una página web con un elemento p y un elemento span.
Usa un selector de hermano adyacente para dar estilo al elemento span que sea inmediatamente adyacente al elemento p para que tenga un borde rojo.

Pruébalo tú mismo

<html>
<head>
    <title>Adjacent Sibling Selector Exercise</title>
    <style>
        /* CSS Code goes here */
    </style>
</head>
<body>
    
</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 hijo Selector de descendienteSelector de hermano adyacenteSelector de hermano general