Selectores de hermanos adyacentes

Se hace referencia a este selector como selector adyacente o selector del próximo hermano. Sólo seleccionará un elemento especificado que esté inmediatamente después de otro elemento especificado.

Síntaxis

elemento_anterior + elemento_afectado { estilos }

Ejemplo

li:first-of-type + li {
  color: red;
}

<ul>
  <li>Uno</li>
  <li>Dos</li>
  <li>Tres</li>
</ul>

Ejemplo

Otro caso podría ser dar estilos a un span que se use de pie de foto de los siguientes elementos <img> :

img + span.caption {
  font-style: italic;
}

que coincidiría con los siguientes elementos <span> :

<img src="photo1.jpg"><span class="caption">The first photo</span>
<img src="photo2.jpg"><span class="caption">The second photo</span>

Especificaciones

Specification
Selectors Level 4
# adjacent-sibling-combinators

Compatibilidad con navegadores

BCD tables only load in the browser

Ver también