La especificación de CSS 3 es cada vez más soportada por los navegadores actuales, como siempre, Internet Explorer es el peor el que más tiempo tarda en adoptar los cambios, pero con el anuncio de un mayor soporte de CSS 3 en IE9 y con posibles novedades sobre su salida en Marzo, tenemos un rompecabezas casi completo.
Algo muy interesante de CSS 3, son sus selectores, que como su nombre indica, permite seleccionar un elemento web para darle estilo o estructura. ¿Cuales son?
Selectores CSS 3
Notación:
- Ele – Elemento – Cualquier elemento web. Ejemplos: div, span, a, li, p, strong, etc.
- atr – Atributo – Describe las características de un elemento web. Ejemplos: href, alt, class, rel, etc.
- val – Valor – Magnitud de un atributo. Ejemplo: en rel=’nofollow’; rel es el atributo y nofollow el valor.
- n – Cualquier número entero.
Selectores y ejemplos prácticos:
|
Sintaxis |
Descripción |
Ele [atr^='val'] |
Selecciona todos los elementos que inicien con un valor especificado.
Ejemplo: |
Ele[atr$='val'] |
Selecciona todos los elementos que terminen con un valor especificado.
Ejemplo: |
Ele[atr*='val'] |
Selecciona todos los elemento que contenga, indiferente a su ubicación, un valor especificado.
Ejemplo: |
Ele:nth-child(n) |
Selecciona el enésimo hijo de su elemento padre. Ejemplo: p a:nth-child(2) seleccionará el segundo enlace de un párrafo. |
Ele:nth-last-child(n) |
Selecciona el enésimo hijo de su elemento padre empezando a constar del último al primero.
Ejemplo: |
Ele:nth-of-type(n) |
Selecciona el enésimo elemento de su tipo.
Ejemplo: |
Ele:nth-last-of-type(n) |
Selecciona el enésimo elemento de su tipo, empezando a constar del último al primero.
Ejemplo: |
Ele:last-child |
Selecciona el último hijo de un elemento.
Ejemplo: |
Ele:first-of-type |
Selecciona el primer elemento de su tipo en el elemento padre.
Ejemplo: |
Ele:last-of-type |
Selecciona el último elemento de su tipo en el elemento padre.
Ejemplo: |
Ele:only-child |
Selecciona el único elemento hijo de un elemento padre.
Ejemplo: |
Ele:only-of-type |
Selecciona el único elemento de cierto tipo.
Ejemplo: |
Ele:empty |
Selecciona los elementos web que no tienen elementos hijos.
Ejemplo: ul:empty seleccionará todas las listas no numeradas sin elementos. |
Ele:target |
Selecciona los elementos que tienen como destino una URL . |
Ele:enabled |
Selecciona elementos (de formularios) con valor enabled (habilitado).
Ejemplo: |
Ele:disabled |
Selecciona elementos (de formularios) con valor disabled (deshabilitado).
Ejemplo: |
Ele:checked |
Selecciona elementos (de formularios) con valor checked (seleccionado).
Ejemplo: |
Ele::selection |
Selecciona los elementos que han sido seleccionados/resaltados por el usuario. Las propiedades aplicables son color, background, cursor y outline.
Ejemplo: |
Ele:not(s) |
Selecciona todo los elementos que no sean un selector indicado (s) dentro de un elemento web.
Ejemplo: |
::first-line |
Selecciona la primera línea de un elemento web.
Ejemplo: |
::first-letter |
Selecciona la primera letra de un elemento web.
Ejemplo: |
::before |
Se ubica en la parte anterior de un elemento web (típicamente para agregar contenido).
Ejemplo: |
::after |
Se ubica en la parte posterior de un elemento web (típicamente para agregar contenido).
Ejemplo: cite |
Navegadores que soportan selectores CSS 3
A grandes rasgos, sin entrar a ver cada caso, los selectores CSS 3 están soportados en:
- Google Chrome 1.0 o superior.
- Mozilla Firefox 3.0 o superior.
- Opera 9.5 o superior.
- Safari 3.1 o superior.
- ¿Internet explorer 9?
Como puede verse, Internet Explorer es prácticamente el único obstáculo para un soporte casi completo. Sin embargo, puede hacerse algo al respecto, por medio de ie-css3.js puede agregarse soporte a varios selectores desde IE5 hasta IE8.
Conclusión
Los selectores de CSS 3 se presentan como una interesante herramienta: ahorran en parte el uso de lenguajes de programación, pueden hacer más optimo el código CSS y más especifica la selección de elementos.
En lo particular, no veo mucho problema en su uso para fines estéticos para un sitio web; aquel navegador que no lo soporte, tendrá una versión a su medida, sin las ventajas de CSS 3. No así en el uso en la funcionalidad del sitio (navegación, formularios, etc) donde si tendrá un impacto en la experiencia del usuario.
En fin, aun nos falta la salida de IE9 y/o que una buena parte de los usuarios de la web adopten navegadores modernos. Por suerte, las estadísticas dicen que se va por buen camino.
Más información
CSS / Diseño / Snippets / Tutoriales
chrome / CSS3 / Firefox / internet explorer / Navegadores / Opera / Selectores
@Francisco: parece que… ¿como decirlo? “la estructura” para el diseño web es cada vez más completa y fácil (para algunos). Yo aprendí HTML cuando intentaba modificar mi plantilla, sin ayuda de nadie entendí un poco, lo que demuestra que las nuevas ¿tecnologías? son cada vez mejor y están al alcance de todos.
Jorge, sin duda, y mientras serán mejoras, bienvenidas, aunque haya que re-aprenderlas.