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
| Especificacion | Estado | Comentarios |
|---|---|---|
| Selectors Level 4 La definición de 'next-sibling combinator' en esta especificación. |
Working Draft | |
| Selectors Level 3 La definición de 'Adjacent sibling combinator' en esta especificación. |
Recommendation | |
| CSS Level 2 (Revision 1) La definición de 'Adjacent sibling selectors' en esta especificación. |
Recommendation | Initial definition |
Compatibilidad entre navegadores
BCD tables only load in the browser