Using CSS 3 selectors to apply link icons

200715 Jul
Using CSS 3 selectors to apply link icons
by Peter Gasston
Posted in Declarations, Modules, Tutorials
Tweet

I mentioned earlier this year a tutorial which shows how to use CSS 3 selectors to enhance hyperlinks. Of course, you don’t need to limit yourself to just the href attribute; with CSS 3 selectors, you can use the same technique for any tag which has an attribute. I’m going to give a couple of quick examples, which will output the following result (of course, you’ll need a browser better than IE6 to see them!):
All icons are from the fantastic collection at famfamfam.com.

The first list item uses the general attribute selector to look for any tags with an accesskey attribute and display an icon to alert users to its presence:
```
#test_selectors a[accesskey] {
background: url('icon_key.gif') no-repeat 0 50%;
text-indent: 20px;
}
```
The second item looks for links with a type attribute value of ‘application/pdf’ (you do mark up links to documents using the type attribute, right?) using the exact attribute selector, then inserts an icon advising you of the destination document:
```
#test_selectors a[type='application/pdf'] {
background: url('file_acrobat.gif') no-repeat 0 50%;
text-indent: 20px;
}
```
Finally, if you have a multi-language site you can link to another version using the lang attribute with the value of that language, then use the language attribute selector to apply that country flag:
```
#test_selectors a[lang|='fr'] {
background: url('fr.gif') no-repeat 0 50%;
text-indent: 20px;
}
```
As always there is much more you can do with the selectors; if you use or develop this idea on your site, post links here for us to see.
You can skip to the end and leave a response.
Comments
- 01.
  
  CSS3中的炫目新功能预览 | 百锐 says:Comment » March 26th, 2011 at 11:05 am
  
  […] 使用CSS3选择器应用链接图标 […]
- 02.
  
  Some More Good CSS3 And Jquery Tutorial | Free download softwares, music, wordpress template, joomla template, Jquery tools and tips, Beauty tips, Free online video.. says:Comment » April 19th, 2011 at 12:55 pm
  
  […] Using CSS 3 selectors to apply link icons […]
- 03.
  
  Tweets for 23-05-2011 says:Comment » May 24th, 2011 at 4:14 am
  
  […] CSS 3 selectors to apply link icons > http://www.css3.info/using-css-3-selectors-to-apply-link-icons/ -> No Responses to “Tweets for […]
- 04.
  
  Elric says:Comment » July 5th, 2011 at 6:11 am
  
  Newbie Programmer…. Little Hard,,,, :(
- 05.
  
  CSS3 Exciting Functions-Features and Useful Tutorials - Pixel2Pixel Design says:Comment » July 14th, 2011 at 8:47 am
  
  […] Using CSS3 Selectors to Apply Link Icon […]
- 06.
  
  Top Hot Latest 100 Detailed CSS3 Tutorials & Techniques says:Comment » August 20th, 2011 at 4:18 pm
  
  […] Using CSS 3 selectors to apply link icons […]
- 07.
  
  Sembunyi says:Comment » September 5th, 2011 at 11:46 am
  
  Thank you for this tutorial…
- 08.
  
  85 Most Useful CSS3 Techniques and Tutorials for Every Web Designer and Developer | Web and Graphic Design Blog says:Comment » September 16th, 2011 at 8:38 am
  
  […] 5. Using CSS 3 selectors to apply link icons […]
- 09.
  
  23 Must-Read Tutorials for Advanced HTML5/CSS3 Coders « Designscape – advertising, branding, graphic design tutorials, news and inspiration says:Comment » November 11th, 2011 at 3:29 pm
  
  […] CSS Link Icons with Selectors […]
- 10.
  
  23 Must-Read Tutorials for Advanced HTML5/CSS3 Coders | Launch It Now says:Comment » November 17th, 2011 at 9:11 pm
  
  […] CSS Link Icons with Selectors […]
- 11.
  
  CSS3令人激动的30+特点 | 睛采 says:Comment » January 22nd, 2012 at 5:23 am
  
  […] Using CSS3 Selectors to Apply Link Icon […]
- 12.
  
  Rock & Concrete Breaking says:Comment » April 16th, 2012 at 2:17 pm
  
  Pretty good post!
- 13.
  
  Top 100 Useful And Detailed CSS3 Tutorials And Techniques - MegaTeacher | Let's start learning says:Comment » September 1st, 2012 at 6:56 pm
  
  […] Using CSS 3 selectors to apply link icons […]
- 14.
  
  23 Must-Read Tutorials for Advanced HTML5 CSS3 Coders - bcstatic.com says:Comment » June 24th, 2013 at 6:30 pm
  
  […] CSS Link Icons with Selectors […]

Subscribe to our RSS

OUR SPONSORS

Advertise here?

CATEGORIES

FRIENDS

META2

TAG CLOUD

CSS3

Comments