Paulund

Style Links Depending On What They Are Linking To In CSS3

Since CSS3 you can actually define CSS styles by using the elements attributes, so I can look for input text box by setting the CSS.


input[type=text]

On links you use the attribute href to define where the link will send the visitor. Therefore you can use the same technique as above on the different things you are likely to link to. Things like external page, internal pages, email, PDF, ZIP files are all possible media which you could could to. ## External Links

If you define your external links with a rel=external then you can easily style these differently.


/* external links */
a[rel="external"]{
     font-size:16px;
}

Email Links

All email links will start with mailto, so in the CSS selector we are looking for all links which start will the words mailto. This is done by using ^= which will return all likes which start with the follow.


/* email links */
a[href^="mailto:"]{
     font-size:18px;
}

PDF Links And ZIP Links

All you PDF links are going to end with the file extension of .pdf therefore you can use the same technique as the email links but change the logic to search for the end of the string, this is done by using $=.


/* PDF Links */
a[href$=".pdf"]{
     font-size:16px;
}
/* ZIP Links */
a[href$=".zip"]{
     font-size:16px;
}