» Publicación:
12 Febrero 2013
/
Categoría:

Ejemplos Prácticos de Selectores de Atributos CSS

Seguro haz escuchado o ya estas usando los selectores de atributo de CSS, pero ¿conoces todas las variaciones y que usos prácticos se les puede dar?. En este tutorial veremos todos los tipos de selectores de atributo disponibles y ademas algunos ejemplos aplicables que tal vez te sirvan.

1.- Trabajando con: [attr^=valor]

Esta variación seleccionará a los elementos que tengan ese atributo y cuyo valor declarado comience con lo que se indica.
Un uso práctico seria por ejemplo ponerles iconos a una serie de enlaces a redes sociales, donde detectamos a que red social esta enlazando (el enlace debe empezar con http://face…) y de acuerdo a ello ponemos el icono respectivo:

El HTML:

El CSS:

Ver demo

2.- Trabajando con: [attr$=valor]

Este selector es lo invertido al anterior, seleccionará a los elementos que tengan ese atributo y cuyo valor declarado termine con lo que se indica.
El uso mas común que se le da a este tipo de selector es para estilizar enlaces de descarga de archivos, en el cual la ruta termina en el formato de archivo (http://…/documento.doc), el cual usamos para hacer una selección individual:

El HTML:

El CSS:

Ver demo

  • Facebook
  • Twitter
  • Tumblr
  • Digg
  • Reddit
  • LinkedIn
  • Google Bookmarks
  • E-Mail
Etiquetas
» Sobre el autor: Reckless
Joven chileno de 29 años, con un paso por la escuela de Ingenieria de la UNAB, que dejo a medio camino para tomar la carrera de Diseñador Gráfico Profesional en la Universidad Santo Tomás, que era lo que siempre busco desde los 12 años. Fanático de la Universidad de Chile, el Metal y el Hardrock. Actualmente trabajando como Diseñador & Desarrolador Web para Especiales de Emol.com, ademas de "Freelancear" cuando se puede.
Comentarios
Por ahora esta entrada no contiene ningún comentario...
Se el primero en comentar está entrada en el formulario de abajo.
Escribe tú comentario
*
*
» Mensaje: