English Português

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: a[href='http://blogandweb.com'] Seleccionará todos los links hacia blogandweb.com

Ele[atr$='val']Selecciona todos los elementos que terminen con un valor especificado.

Ejemplo: a[href$='.zip'] Seleccionará todos los links de archivos zip.

Ele[atr*='val']Selecciona todos los elemento que contenga, indiferente a su ubicación, un valor especificado.

Ejemplo: a[href*='tag'] Seleccionará todos los links que contengan la palabra "tag".

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: p a:nth-last-child(2) seleccionará el penúltimo enlace de un párrafo.

Ele:nth-of-type(n)Selecciona el enésimo elemento de su tipo.

Ejemplo: p img:nth-of-type(1) seleccionará la primer imagen en un párrafo.

Ele:nth-last-of-type(n)Selecciona el enésimo elemento de su tipo, empezando a constar del último al primero.

Ejemplo: p img:nth-last-of-type(1) seleccionará la última imagen en un párrafo.

Ele:last-childSelecciona el último hijo de un elemento.

Ejemplo: .post p:last-child seleccionará el último párrafo dentro de un elemento con clase "post".

Ele:first-of-typeSelecciona el primer elemento de su tipo en el elemento padre.

Ejemplo: .post img:first-of-type seleccionará la primer imagen dentro en un elemento con clase "post".

Ele:last-of-typeSelecciona el último elemento de su tipo en el elemento padre.

Ejemplo: .post img:last-of-type seleccionará la última imagen dentro en un elemento con clase "post".

Ele:only-childSelecciona el único elemento hijo de un elemento padre.

Ejemplo: ul li:only-child seleccionará el elemento una de lista, cuando la lista solo contenga un elemento.

Ele:only-of-typeSelecciona el único elemento de cierto tipo.

Ejemplo: .post img:only-of-type seleccionará las imágenes presentes en los elementos .post con solo una imagen.

Ele:emptySelecciona los elementos web que no tienen elementos hijos.

Ejemplo: ul:empty seleccionará todas las listas no numeradas sin elementos.

Ele:targetSelecciona los elementos que tienen como destino una URL .
Ele:enabledSelecciona elementos (de formularios) con valor enabled (habilitado).

Ejemplo: input[type="text"]:enabled seleccionará los campos de tipo texto que están habilitados.

Ele:disabledSelecciona elementos (de formularios) con valor disabled (deshabilitado).

Ejemplo: input[type="text"]:disabled seleccionará los campos de tipo texto que están deshabilitados.

Ele:checkedSelecciona elementos (de formularios) con valor checked (seleccionado).

Ejemplo: input:checked seleccionará los campos que estén seleccionados.

Ele::selectionSelecciona los elementos que han sido seleccionados/resaltados por el usuario. Las propiedades aplicables son color, background, cursor y outline.

Ejemplo:  ::selection ubicara el texto que haya sido seleccionado/resaltado (con el cursor del mouse) por el autor.

Ele:not(s)Selecciona todo los elementos que no sean un selector indicado (s) dentro de un elemento web.

Ejemplo: .post:not(img) seleccionará todos los elementos que no sean imágenes y estén dentro del elemento web con clase "post".

::first-lineSelecciona la primera línea de un elemento web.

Ejemplo:  p::first-line seleccionará la primera línea de un párrafo.

::first-letterSelecciona la primera letra de un elemento web.

Ejemplo:  p::first-letter seleccionará la primera letra de un párrafo.

::beforeSe ubica en la parte anterior de un elemento web (típicamente para agregar contenido).

Ejemplo: p::before {content: 'Nota: '} Agregará el texto "Nota :" antes de cada párrafo.

::afterSe ubica en la parte posterior de un elemento web (típicamente para agregar contenido).

Ejemplo: cite::before {content: 'Fin de la cita'} Agregará el texto "Fin de la cita" al final de cada elemento 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

Escrito por Francisco Oliveros

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Artículos relacionados

Sigue leyendo consejos, tips y tutoriales para tu blog.

    Comentarios

    1. Jorge Duré / Hace 7 años /

      @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.

      Responder a Jorge Duré →
    2. Francisco / Hace 7 años /

      Jorge, sin duda, y mientras serán mejoras, bienvenidas, aunque haya que re-aprenderlas.

      Responder a Francisco →
    3. Iván / Hace 4 años /

      Gran Post. Aunque Explorer no nos lo pone fácil con un sencillo script se pueden usar los selectores CSS3 en versiones antiguas de IE. Se llama Selectivizr y aunque necesita algún framework de javascript para funcionar, no suelen faltar en desarrollos modernos.

      Responder a Iván →

    Responder

    ¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

    Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

    Términos de uso - Política de privacidad