Selector adyacente CSS
elemento1 + elemento2 { ... }
Si se considera el siguiente código HTML:
<body>
<h1>Titulo1</h1>
<h2>Subtítulo</h2>
...
<h2>Otro subtítulo</h2>
...
</body>
La página anterior dispone de dos elementos <h2>, pero sólo uno de ellos se encuentra inmediatamente después del elemento <h1>. Si se quiere aplicar diferentes colores en función de esta circunstancia, el selector adyacente es el más adecuado:
h2 { color: green; }
h1 + h2 { color: red }
Las reglas CSS anteriores hacen que todos los <h2> de la página se vean de color verde, salvo aquellos <h2> que se encuentran inmediatamente después de cualquier elemento <h1> y que se muestran de color rojo.
Técnicamente, los elementos que forman el selector adyacente deben cumplir las dos siguientes condiciones:
elemento1 y elemento2 deben ser elementos hermanos, por lo que su elemento padre debe ser el mismo.
elemento2 debe aparecer inmediatamente después de elemento1 en el código HTML de la página.
El siguiente ejemplo es muy útil para los textos que se muestran como libros:
p + p { text-indent: 1.5em; }
En muchos libros, suele ser habitual que la primera línea de todos los párrafos esté indentada, salvo la primera línea del primer párrafo. Con el selector p + p, se seleccionan todos los párrafos de la página que estén precedidos por otro párrafo, por lo que no se aplica al primer párrafo de la página.
Selector adyacente CSS
Reviewed by Unknown
on
6:57
Rating:
Reviewed by Unknown
on
6:57
Rating:
No hay comentarios: