lunes, 5 de mayo de 2014

El selector general de elementos adyacentes



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 en la entrada