Q∆B∆LH∆

Bueno, esto es algo que siempre me había parecido un poco difícil de hacer (bueno, simplemente no sabia), en realidad gracias a los selectores de atributo es algo muy fácil, hay que tener en cuenta que esto solo funcionará en los navegadores modernos, de momento estos navegadores son: Firefox, Safari, Opera e Internet Explorer 7 (el 6 no). Los navegadores que no lo soportan simplemente lo ignoran y funcionaria como si esto no existiese, es decir no hace nada, no hay problema. También cabe avisar que como es una especificación que todavía no esta aprobada (aunque ya hay navegadores que la soportan) nos dará problemas para validar el CSS. Aviso, es recomendable tener una mínima idea de hojas de estilo y HTML para saber que estamos haciendo en cada momento y no hacer copiar pegar solo, sino poder después aplicarlo como queráis.
Bueno, para este tutorial voy a explicar como marcar los enlaces externos, así como los enlaces según el tipo de archivo. Empezaré por explicar un poco como se usan estos selectores, empezamos por como se usan:

elemento[atributo=valor] { estilo a aplicar; }
Y también tenemos para antes del = dos prefijos: $ para el final, y ^ para el inicio, es decir para decir que ese atributo acabe o empiece por.

Ejemplos:
a[href ^="http://google.com"],
a[href ^="http://www.google.com"] { color: #00FF00; }

a[href $='.pdf'] { color: #FF0000; }

a[target="_blank"] { color: #0000FF; }

Bueno, empezemos por el primer ejemplo, este estilo lo que hará será colorear en verde todos los enlaces que lleven a google.com (notad que lo hemos puesto con y sin www, importante), lo que hemos hecho es decirle que aplique el estilo a todos aquellos enlaces que empiecen con esa dirección, es decir que no solo marcaria los que lleven a la portada, también marcaria los que lleven por ejemplo a google.com/blogsearch.
El segundo ejemplo pintará de rojo los enlaces que nos lleven a archivos PDF, es decir aquellos enlaces que terminan en .pdf, no funciona si un enlace lleva a un pdf pero es del tipo url.com/archives/1388393, por ejemplo.
El ultimo de los ejemplos lo que hará será marcar aquellos enlaces que se abran en una nueva ventana, para ello lo que hacemos es decirle que pinte de azul todos aquellos enlaces en que su atributo target sea exactamente _blank, es decir, los que se abren en una nueva ventana.

Como veis todos los ejemplos que he usado se refieren a enlaces, aunque se pueden aplicar a cualquier elemento o incluso a las clases que nosotros mismos hagamos. Pasada la parte “teórica” voy a ir con la “práctica”, y como veo que esto se esta alargando mucho lo dejo después del salto.

Lo primero que vamos a ver es como marcar los enlaces externos, en primer lugar marcamos todos los enlaces:

.contenidodelpost a[href^="http"] {
padding: 0 18px 0 0;
background: url('imagenes/iconos/enlaceexterno.png') right center no-repeat;
}
Con esto marcaríamos todos los enlaces dentro de la clase ‘contenidodelpost’, de manera que solo marcaria los que estan dentro del post, los de la barra lateral, por ejemplo, no puesto que estos no harian falta (a mi parecer), el problema es que los marca todos, incluyendo los internos así que a continuación de este añadiremos otro estilo que lo que hace es que los enlaces dentro de nuestro sitio les quita el fondo y relleno aplicado por el anterior:

.contenidodelpost a[href^="http://tuweb.com"],
.contenidodelpost a[href^="http://www.tuweb.com"] {
padding: 0px;
background-image: none;
}

Ahora lo siguiente que haremos será marcar los enlaces por tipo (pdf, imagen, archivo comprimido, sonido, vídeo…), esto, como hemos visto en los ejemplos iniciales simplemente trata de hacer que los enlaces que acaben con una extensión concreta tengan un estilo concreto, por ejemplo, al igual que en los enlaces externos, lo que haríamos seria darle un relleno por la derecha y ponerle una pequeña imagen de fondo a la derecha, de manera que queda como si estuviese al lado del texto, veamos por ejemplo los sonidos, podríamos poner un icono para cada tipo de sonido, pero es más recomendable unificar y ponerlos todos los tipos de archivo de sonido con el mismo icono:

.contenidodelpost a[href $='.mp3'],
.contenidodelpost a[href $='.wma'],
.contenidodelpost a[href $='.aac'],
.contenidodelpost a[href $='.ogg'] {
padding: 0 18px 0 0;
background: url('imagenes/iconos/sonido.png') right center no-repeat;
}

Y bueno para los demás tipos de archivo seria igual pero cambiando la extensión y el icono. Lo unico que nos quedaria marcar son los enlaces a emails, pues nada, igual que con el de los enlaces externos, le decimos que todos los enlaces en los que la ruta empiece por “mailto:” les añada el estilo:

.contenidodelpost a[href^="mailto:"] {
padding: 0 16px 0 0;
background: url('images/icones/email.png') right center no-repeat;
}

Para acabar me gustaría preguntaros que os parecen los iconos que tengo he usado para Qabalha (los podéis ver en funcionamiento), ¿demasiado complejos?, son todos del set de iconos Silk de FamFam. Bueno, los selectores de atributos a parte de para marcar enlaces nos sirven también para algunas cosas más que ya explicaré si hace falta, aunque investigándolos un poco enseguida le podréis encontrar alguna “utilidad”.
Fuentes: Borrador del W3C, Vagabundia, BlogMundi.