Los nuevos selectores CSS3

Los nuevos selectores CSS3

Las especificaciones CSS3 introducen nuevos selectores. El módulo de los selectores ya está terminado, así que el W3C ha propuesto una Recommendation con fecha del 29 de septiembre de 2011. Esta es su URL: http://www.w3.org/TR/css3-selectors/

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.