Los Selectores de CSS3

Ya sabes más o menos cómo funciona esto de los estilos CSS, no? Defines unas cuantas características en una hoja de estilos para ciertos elementos y uala! Los elementos toman esas propiedades por arte de magia. Lo único que hemos de saber es cómo definir esas propiedades en la hoja de estilos y, como no, saber indicar a qué elemento se debe aplicar cada estilo.

Para esto último, para que el navegador sepa qué estilo ha de colocar a cada elemento, se crearon los Selectores. En CSS2 (lo que hemos visto en las dos lecciones anteriores) se han mostrado ya algunos selectores como:

Selectores de Tipo: Estilos aplicados a "tipos" de etiquetas, como por ejemplo a los títulos h1, h2, h3, etc. O estilos aplicados a párrafos con p { ....estilos....}. Eso son selectores de tipo.
• Selectores de Clase: Son aquellos en los que nos inventábamos un nombre de "clase" y lo colocábamos con class="nombre" para indicar al navegador a qué elementos aplicar ese estilo.
• Selectores de id: Similar a los selectores de clase, solo que para relacionarlos usábamos id="nombre" y además se aplicaba a elementos únicos dentro de cada página (que aparecían una sola vez dentro de cada una de las páginas de la web).

Pues bien, además de esos que siguen siendo válidos, ahora CSS3 ha inventado otros modos de indicarle al navegador a qué elementos se va a aplicar cada estilo. Veamos unos ejemplos. Con CSS3 podemos hacer las mismas cosas que con CSS2.1 (la versión anterior a CSS3) pero con la diferencia que CSS3 nos permite usar unos selectores atajo, mucho más cómodos. Vamos a ver con detalle cada uno de ellos, con ejemplos.