Si en algún momento nos encontramos con la necesidad de asignar unos estilos concretos a un elemento en función de alguno de los atributos de dicho elemento, con css3 podemos hacerlo fácilmente. En el siguiente ejemplo pondremos con css un icono concreto a enlaces de archivos en función del tipo de archivo que enlacemos. A continuación mostramos el código y lo comentamos después:
a:before {
color: #000;
font-size: 1em;
font-style: normal;
font-family: FontAwesome;
}
a [href$=".*"]:before { content: '\f15b'; }
a [href$=".txt"]:before { content: '\f0f6'; }
a [href$=".pdf"]:before { content: '\f1c1'; }
a [href$=".doc"]:before,
a [href$=".docx"]:before { content: '\f1c2'; }
a [href$=".xls"]:before,
a [href$=".xlsx"]:before { content: '\f1c3'; }
a [href$=".ppt"]:before,
a [href$=".pptx"]:before { content: '\f1c4'; }
a [href$=".jpg"]:before,
a [href$=".jpeg"]:before,
a [href$=".png"]:before,
a [href$=".gif"]:before,
a [href$=".bmp"]:before,
a [href$=".tiff"]:before,
a [href$=".psd"]:before { content: '\f1c5'; }
a [href$=".zip"]:before,
a [href$=".rar"]:before,
a [href$=".tar"]:before,
a [href$=".tar.gz"]:before,
a [href$=".7z"]:before { content: '\f1c6'; }
Comentamos en primer lugar que los iconos los ponemos mediante el pseudo-elemento :before (sirve para añadir contenidos antes del contenido original de un elemento) en combinación con la propiedad content. Los iconos que utilizamos son los de FontAwesome (fuente de iconos web escalables disponible).
En nuestro código vemos que comenzamos asignando a todos los contenidos que añadimos a todos los enlaces con :before un serie de estilos de color negro, tamaño de 1em, estilo de font normal y familia FontAwesome.
a:before {
color: #000;
font-size: 1em;
font-style: normal;
font-family: FontAwesome;
}
En las siguientes líneas lo que hacemos es insertar mediante content un contenido anterior al contenido de los enlaces y que en nuestro caso es un icono de FontAwesome. Para cargar uno u otro icono en función del tipo de archivo que enlazamos utilizamos la posibilidad que nos proporciona css3 de acceder al atributo href del elemento (podemos acceder a cualquier atributo que tuviéramos).
a [href$=".*"]:before { content: '\f15b'; }
Como podéis ver la forma de acceder a un atributo es escribiendo dicho atributo entre corchetes []. Dentro de los corchetes y seguido del nombre del atributo tenemos que poner el operador para la condición que buscamos (podemos querer que sea exactamente igual a, que empiece por, que termine en, que contenga, etc.), en nuestro caso queremos que termine en, por lo que usamos el operador $= (podéis buscar como serían los otros operadores en internet), y tras el operador pondremos entre comillas el texto que queremos que cumpla, en nuestro ejemplo empezamos con un .* para que tengamos el icono base para todas las extensiones.
En las siguiente líneas del código se ve que hacemos la misma operación pero cambiando el valor del content para mostrar otros iconos en función de la extensión concreta del archivo enlazado que queremos. También podemos observar como agrupamos varias extensiones para que les asigne un mismo icono, por ejemplo las .jpg, .jpeg, .png, .gif, .bmp, .tiff y .psd tendrán el mismo icono.
Y así de sencillo, podemos jugar con todas las opciones en cuanto al atributo del elemento, a los operadores de la condición a cumplir, etc.
En este ejemplo usamos :before para que nos ponga los iconos antes del contenido de los enlaces, pero podríamos querer lo mismo pero añadidos al final del contenido, lo que tendríamos que hacer es simplemente cambiar el pseudo-elemento :before por el :after.
Espero que os sirva de ayuda.