Un selector adyacente en CSS nos permite seleccionar un elemento HTML que se encuentra justo a continuación de otro elemento HTML.

Para verlo más claramente tomemos un ejemplo…

Imaginemos que tenemos el siguiente código HTML:

<body>
<h1>Título principal</h1>
<h2>Subtítulo</h2>
<h2>Otro subtítulo</h2>
</body>

En este ejemplo, donde no estamos utilizando clases CSS, sino simplemente las propias etiquetas HTML, podemos distinguir, mediante el uso de los selectores adyacentes, elementos (o etiquetas) HTML que se encuentran justo delante de (o son posteriores a) otros elementos HTML.

Imaginemos que en el ejemplo anterior queremos referirnos exclusivamente al <h2> que se encuentra justo a continuación del <h1>. Ésto podemos hacerlo con un selector adyacente de la siguiente forma:

h1 + h2 { font-size: 20px; }

Al separar los elementos mediante el símbolo + estamos indicando que nos referimos al <h2> que va justo después del <h1> (son adyacentes). De esta forma el tamaño de texto font-size: 20px; sólo será aplicable a este primer <h2> que va justo después del <h1>.

Igualmente, si en este ejemplo hubiéramos definido:

h2 + h2 { color: blue; }

… sólo se aplicaría el color de texto azul a las etiquetas <h2> que vayan precedidas de otras etiquetas <h2>. En nuestro ejemplo sería el segundo <h2>.

También podemos utilizar selectores adyacentes múltiples, de la forma:

h1 + h2 + h2 { background: green; }

En este último ejemplo se aplicaría el fondo verde a las etiquetas <h2> que estuvieran precedidas de un <h2> que a su vez estuviera precedido de un <h1>.

Hay que tener en cuenta 2 condiciones fundamentales para poder utilizar los selectores adyacentes:

1) Todos los elementos del selector adyacente deben ser hermanos, es decir, tener un padre común. En nuestro ejemplo primero el padre común sería <body>.

2) Los elementos que aparecen en el selector adyacente deben estar colocados (en el código HTML) en el orden expuesto, y cada uno inmediatamente después del anterior (de otra forma no serían adyacentes).