Selector adyacente en CSS

El selector adyacente + permite seleccionar un elemento por su vecino inmediato superior.

Sintaxis

selector1 + selector2 {
	
}

Ejemplo

Apliquemos a todas las etiquetas p que se encuentren inmediatamente después de las etiquetas h2 y coloreémoslas en rojo:

<h2>texto</h2>
<p>
	+
</p>
<p>
	-
</p>
<p>
	-
</p>

h2 + p {
	color: red;
}

Ejemplo

Apliquemos a todas las etiquetas p que se encuentren inmediatamente después de elementos con la clase .test y coloreémoslas en rojo:

<p class="test">
	texto
</p>
<p>
	+
</p>
<p>
	-
</p>

.test + p {
	color: red;
}

Ejemplo

Apliquemos a todos los elementos con la clase .elem que se encuentren inmediatamente después de elementos con la clase .test y coloreémoslos en rojo:

<p class="test">
	texto
</p>
<p class="elem">
	+
</p>
<p>
	-
</p>

.test + .elem {
	color: red;
}

Véase también

Selector de hijo,
que permite seleccionar elementos por anidación directa
Selector contextual,
que permite seleccionar un elemento por su elemento padre
Selector de hermanos general,
que permite seleccionar elementos después de uno dado
Selector universal,
que permite seleccionar todos los elementos