El selector adyacente se emplea para seleccionar elementos que son hermanos (su elemento padre es el mismo) y están seguidos en el código HTML. Este selector emplea en su sintaxis el símbolo +. Si se considera el siguiente ejemplo:
h1 + h2 { color: red } <body> <h1>Titulo1</h1> <h2>Subtítulo</h2> ... <h2>Otro subtítulo</h2> ... </body>
Los estilos del selector h1 + h2 se aplican al primer elemento <h2> de la página, pero no al segundo <h2>, ya que:
<h1> es <body>, el mismo padre que el de los dos elementos <h2>. Así, los dos elementos <h2> cumplen la primera condición del selector adyacente.<h2> aparece en el código HTML justo después del elemento <h1>, por lo que este elemento <h2> también cumple la segunda condición del selector adyacente.<h2> no aparece justo después del elemento <h1>, por lo que no cumple la segunda condición del selector adyacente y por tanto no se le aplican los estilos de h1 + h2.El siguiente ejemplo puede ser útil para los textos que se muestran como libros:
p + p { text-indent: 1.5em; }
En muchos libros es habitual que la primera línea de todos los párrafos esté indentada, salvo la primera línea del primer párrafo. El selector p + p selecciona todos los párrafos que están dentro de un mismo elemento padre y que estén precedidos por otro párrafo. En otras palabras, el selector p + p selecciona todos los párrafos de un elemento salvo el primer párrafo.
El selector adyacente requiere que los dos elementos sean hermanos, por lo que su elemento padre debe ser el mismo. Si se considera el siguiente ejemplo:
p + p { color: red; } <p>Lorem ipsum dolor sit amet...</p> <p>Lorem ipsum dolor sit amet...</p> <div> <p>Lorem ipsum dolor sit amet...</p> </div>
En el ejemplo anterior, solamente el segundo párrafo se ve de color rojo, ya que:
p + pp + p y el párrafo muestra su texto de color rojo.<div>, por lo que no se cumple ninguna condición del selector p + p ya que ni va precedido de un párrafo ni comparte padre con ningún otro párrafo.