Atributos avanzados en CSS para diferentes tipo de Enlaces

Con CSS se puede hacer que cada link (vínculo o enlace) tenga un color distinto o cualquier regla de estilo que se desee, por ejemplo los enlaces a otras páginas de nuestro sitio de color rojo, los vínculos a enlaces externos de color verde y los links a imágenes o documentos de color azul, veamos como se hace esto:

 a[href*="guiaplaza.com"] {color:#CD3300;}

En primer lugar veamos que significa:

a    en css ya sabemos que dará estilo a los selectores <a .....>texto</a> del html, normalmente lo encontraríamos como    a{color:#cc3300}

[href*="guiaplaza.com" ]  esto si es nuevo, se trata de reglas avanzadas en donde los selectores de atributos se hacen muy útiles.

Hay 3 variaciones:

*   ejecuta la regla si la cadema guiaplaza.com está presente dentro del href.
$   ejecuta la regla si la cadema guiaplaza.com termina dentro del href.
^   ejecuta la regla si la cadema guiaplaza.com se inicia dentro del href.

Con está configuración podemos hacer infinitas variaciones como:

- Configurar una regla de estilos (css) para los enlaces a imagenes .jpg .gif . png

a[href$="jpg"] {color: blue;}
a[href$="gif"] {color: red;}
a[href$="png"] {color: green;}

- Aplicar reglas a diferentes tipos de documentos:

a[href$="pdt"] {color: red;}
a[href$="doc"] {color: green;}
a[href$="xls"] {color: blue;}
a[href$="ppt"] {color: yellow;}