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
css
li:first-of-type + li {
color: red;
}
html
<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>
:
css
img + span.caption {
font-style: italic;
}
que coincidiría con los siguientes elementos <span>
:
html
<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