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.
Sintaxis
elemento_anterior + elemento_afectado { estilos }
Ejemplo
li:first-of-type + li {
color: red;
}
<ul>
<li>Uno</li>
<li>Dos</li>
<li>Tres</li>
</ul>
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