En el anterior post sobre IE7(Internet Explorer 7) comentaba que van a soportar los selectores de CSS(Cascading Style Sheets)2.1. Estos son soportados en su mayoría por los navegadores modernos, e incluso un par de ellos nos pueden ser útiles con el IE6, así que vamos a ver cuáles son:
*Selector universal*
@ * { margin: 0; } @
Nos dice que cualquier elemento tendrá margen cero. Esto puede ser muy útil para eliminar los márgenes y rellenos de todos los elementos, y luego ser nosotros quienes los asignemos, asegurando así la consistencia en los diferentes navegadores.
*Descendiente*
p strong { color: #ff0; }
Cualquier elemento _strong_ que esté contenido dentro de un párrafo (sea descendiente de éste), se mostrará de color #ff0.
*Hijo*
body > #menu { margin: 0; }
En este caso se aplicará un margen nulo al elemento identificado como _menu_, siendo este hijo de BODY. Como hijo se entiende: Un elemento A es llamado hijo de un elemento B si, y sólo si, B es el padre de A.
No funciona en IE, con lo que nos puede servir para filtrar ciertas cosas sin usar un hack que nos tire por los suelos la validación.
*Adyacente*
p + strong { font-size: 120%; }
En este caso se aplicaría un tamaño de fuente del 120% a aquellos elementos strong contenidos justo al principio de un párrafo (adyacentes).
No funciona en IE.
*Pseudo-clase lang*
span:lang(en) { font-style:italic; }
Nos permite identificar donde hemos especificado un idioma concreto. En este ejemplo diría que todos los elementos span que tengan el atributo lang=”en” se mostrarán en cursiva.
No funciona en IE ni en Safari.
*De atributo*
a[hreflang] { font-style: italic; }
Ahora estamos diciendo que todos los vínculos que tengan el atributo _hreflang_ fijado (sea cuál sea su valor), se muestren en cursiva.
No funciona en IE.
*Múltiple*
.destacado { color: #000; }
.grande { font-size: 110%; }
Una opción muy útil y que poca gente usa es asignar varias clases a un mismo elemento. Tomando las clases definidas arriba, podríamos decir:
@
Esto es un texto de ejemplo. Podría decir esto, o podría decir otra cosa, porque al fin y al cabo no importa para nada.
@
En el primer caso únicamente mostramos el texto en negro, pero en el segundo además de en negro, aparece ligeramente más grande.
Más información en “Quirksmode”:http://www.quirksmode.org y en la propia “especificacion de CSS2.1″:http://www.sidar.org/recur/desdi/traduc/es/css/selector.html