El CSS2 nos proponía el selector adyacente, que permitía seleccionar el elemento hermano situado a continuación de otro elemento. Ejemplo de la sintaxis: h1+h2 {...}. De este modo solamente era posible aplicar un estilo específico al primer h2 que siguiera al h1.
Con el CSS3, el elemento adyacente no tiene que estar obligatoriamente inmediatamente a continuación del primer elemento, pueden haber otros elementos entre ambos, y el estilo se aplicará a los elementos siguientes que se hayan especificado.
Esta es la sintaxis: h1~h2 {...}.
Ejemplo de selector:
h1~h2 {font-style: italic};
Ejemplo de código:
<h1>Etiqueta de nivel 1</h1>
<p>Mi texto principal entre etiquetas p...</p>
<h2>Etiqueta de nivel 2</h2>
<h2>Otra etiqueta de nivel 2</h2>
Y el resultado obtenido:
Como podemos ver, se ha aplicado la cursiva al texto de los dos elementos <h2> que se encuentran a continuación del <h1>, aunque tengamos un elemento <p> en medio.
Espero haber ayudado en algo. Hasta la próxima oportunidad!
No hay comentarios:
Publicar un comentario