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
We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!
| 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.