Añadir CSS a los enlaces según tipo de archivo

Utilizando el operador '$' (End With...) en la síntaxis de un selector CSS, podemos definir el final de un atributo inline. Aprovechando esta gran función junto con los selectores de atributos, podemos definir el tipo de archivo de un "href".

Puedes revisar este ejemplo para que puedas comprobar el resultado final, recuerda que la única regla que se ha establecido en los atributos es la del tipo de archivo:


Descargar archivo .pdfDescargar archivo .zip

Descargar archivo .txtDescargar archivo .mpg

Nota: las URL's no apuntan a ninguna dirección válida.

El tutorial:

Recordemos que la síntaxis de un selector de atributo era la siguiente:

selector[atributo="valor"] {
/*Lista de atributos que obtendrá este selector*/
}

Nosotros aplicaremos el operador justo después del atributo, quedándonos de la siguiente forma:

selector[atributo$="valor-x"] {
/*Lista de atributos que obtendrá el href que finalice con "valor-x"*/
}

En el caso de los enlaces, la etiqueta es </a>, su atributo es href y el valor que tome este atributo es la URL que abrirá la etiqueta:

<a href="URL.doc">URL ARCHIVO .DOC</a>

Entonces, ya sabiendo cuál es la extensión del archivo, el tipo de selector y además entendimos lo del operador '$', creamos la síntaxis para todas las URL's que finalicen en .doc:

a[href$=".doc"] {
/*Lista de atributos que obtendrá el href que finalice con ".doc"*/
}

Si deseas añadir un ícono al lado del enlace, bastaría con hacerlo con :before:

a[href$=".doc"] {
color:#222; /*color del enlace*/
display:inline-block; /*Para poder aplicar márgenes y paddings*/
padding:10px;
}

a[href$=".doc"]:before {
content:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinEpHXCbVm2IkCTg-qZYZqru13v1Ee5bnTJbAsj2d5ptlDVH9Q0-GaMgxeIQypiBHF4dRxypmTiYnTSnbcoIeUNtljrGXwDlo_9bKKf5MMukH5fwM2PTHByvgUpYAr3EJ38RmX4jxBP48/s16/1349368907_file_extension_doc.png);
display:inline-block; /*Para poder aplicar márgenes y paddings*/
margin:0 15px 0 0;
}

Quedaría de la siguiente forma:

Descargar archivo .doc

Extra: Código fuente del ejemplo:

Para el ejemplo que está al principio de la entrada, utilicé los siguientes atributos, puedes usarlos para crear tus propios botones de descarga:

@font-face { /*Para la fuente de los íconos */
font-family: leaguegothic;
src: url('http://archivos.ayuda-bloggers.info/Fuentes/League%20Gothic/leaguegothic.ttf'),
url('http://archivos.ayuda-bloggers.info/Fuentes/League%20Gothic/leaguegothic.eot');
} 


/*ENLACE PDF*/
a[href$=".pdf"]{
    padding: 10px 15px 10px 15px;
    display:inline-block; 
    background-color:#3F7CA0; /*Color de fondo*/
    color:#FFF; /*Color del texto*/
    text-align:center;
    border-color: #3E89AD #357EA0 #2C7191;
    border-radius: 3px; /*Nivel de bordes redondeados*/
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 1px #D3D3D3, 0 1px 0 #78AFCE inset;
    font-family: leaguegothic;
    font-size:23px;
    text-shadow: 0 1px 0 #1D4A5F;
    text-transform:uppercase;
}
/*ICONO PDF*/
a[href$=".pdf"]:before {
content:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicUR2X162aFktEQTWW9PjZV0WP4t57SeQmD8d0sI9ZxTeLxSoRpogGJ-PJUDx6nxE42Fpaed88czrwhYNpdu-O5EstB7qzExD3tqf33twiPlzc0t2jySc-3B0ll5MqS9qPMgas_4HKiJc/s24/1349367232_pdf.png);
display:inline-block;
padding:0 10px 0 0;
}

/*ENLACE ZIP*/
a[href$=".zip"]{
    padding: 10px 15px 10px 15px;
    display:inline-block; 
    background-color:#3F7CA0; /*Color de fondo*/
    color:#FFF; /*Color del texto*/
    text-align:center;
    border-color: #3E89AD #357EA0 #2C7191;
    border-radius: 3px; /*Nivel de bordes redondeados*/
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 1px #D3D3D3, 0 1px 0 #78AFCE inset;
    font-family: leaguegothic;
    font-size:23px;
    text-shadow: 0 1px 0 #1D4A5F;
    text-transform:uppercase;
    margin:0 0 0 30px;
}
/*ICONO ZIP*/
a[href$=".zip"]:before {
content:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOFpExiBXcAztVdtAXN8UHIdRFfL33gJWIryvT8vLgBaANalJ4xWYpdWlAQ8u-rGAOhV2zXJg3PkkSSTsfR2rrfGQ9tqdY6PWZOzCF64GJcGcHZEPA4iEsnaKtbAz4ysO70ysFeXwrdSA/s24/1349367258_pack-2.png);
display:inline-block;
padding:0 10px 0 0;
}


/*ENLACE TXT*/
a[href$=".txt"]{
    padding: 10px 15px 10px 15px;
    display:inline-block; 
    background-color:#3F7CA0; /*Color de fondo*/
    color:#FFF; /*Color del texto*/
    text-align:center;
    border-color: #3E89AD #357EA0 #2C7191;
    border-radius: 3px; /*Nivel de bordes redondeados*/
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 1px #D3D3D3, 0 1px 0 #78AFCE inset;
    font-family: leaguegothic;
    font-size:23px;
    text-shadow: 0 1px 0 #1D4A5F;
    text-transform:uppercase;
}

/*ICONO TXT*/
a[href$=".txt"]:before {
content:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgg5zG3tT7U47H3NL040MVdDhywmCIKhWHA8JfBZ-SH9QgrJmF8hT-3YkPAM1XnOcMjLeJ2CUpQdMDOYMGEkLHq62y-9Ev87-IrZKAnkZ3gjg2QgheBzY8Ezk5byOUdrykerYm29gM6YK0/s24/1349367784_edit.png);
display:inline-block;
padding:0 10px 0 0;
}


/*ENLACE MPG*/
a[href$=".mpg"]{
    padding: 10px 15px 10px 15px;
    display:inline-block; 
    background-color:#3F7CA0; /*Color de fondo*/
    color:#FFF; /*Color del texto*/
    text-align:center;
    border-color: #3E89AD #357EA0 #2C7191; /*Nivel de bordes redondeados*/
    border-radius: 3px;
    border-style: solid;
    border-width: 1px;
    box-shadow: 0 1px 1px #D3D3D3, 0 1px 0 #78AFCE inset;
    font-family: leaguegothic;
    font-size:23px;
    text-shadow: 0 1px 0 #1D4A5F;
    text-transform:uppercase;
    margin:0 0 0 30px;
}

/*ICONO MPG*/
a[href$=".mpg"]:before {
content:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2S-hQhGB9e1CzcujnNAVSAjb8PMQjQHsGMm5lyoHsLnv89294YwYA0vJ4HKNa0RBbcVFsOnQ2gbFyjJKRMPz6UeaKUOEOHXOkK1Xsp9eRJY3YBiXDNLvgapr2KBryACr5E4sig_UIDhI/s24/1349367766_movie.png);
display:inline-block;
padding:0 10px 0 0;
}


/*PSEOUDO-CLASES HOVER PARA CAMBIAR COLOR*/
a[href$=".zip"]:hover, a[href$=".pdf"]:hover, a[href$=".txt"]:hover, a[href$=".mpg"]:hover {
background-color:#4690B3; /*Color de fondo al pasar el mouse en los iconos*/
text-shadow: 0 1px 0 #1D4A5F;
color:#FFF;
}

Recuerda que todos los códigos CSS deben ir en la hoja de estilos del blog (Antes de ]]></b:skin>)