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
The definition of 'next-sibling combinator' in that specification.
Working Draft  
Selectors Level 3
The definition of 'Adjacent sibling combinator' in that specification.
Recommendation  
CSS Level 2 (Revision 1)
The definition of 'Adjacent sibling selectors' in that specification.
Recommendation Initial definition

Compatibilidad entre navegadores

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support (Yes) (Yes) 7.0[1] (Yes) (Yes)
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 2.1 (Yes) ? (Yes) (Yes)

[1] Internet Explorer 7 no actualiza correctamente el estilo cuando un elemento es insertado dinámicamente antes de otro elemento que coincidía con el selector. En Internet Explorer 8, si un elemento es insertado dinámicamente haciendo click en un enlace, el estilo del first-child no se aplica hasta que el enlace pierde el foco.

Ver también

Etiquetas y colaboradores del documento

 Colaboradores en esta página: alkaithil
 Última actualización por: alkaithil,