-
200715 Jul
Posted in Declarations, Modules, Tutorials
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
accesskeyattribute 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
typeattribute value of ‘application/pdf’ (you do mark up links to documents using thetypeattribute, 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
langattribute 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.
Vakio says:Comment » July 15th, 2007 at 7:45 pm
“Flag as a symbol of language – stupidity or insult?” by Jukka Korpela:
-
02.
Debates on what icons to use aside, the technique still stands.
-
03.
Lovely Article… *starts marking the type attribute on his links*
-
04.
A similar point as Vakio: the accesskey icon isn’t good… as user I might think that there is a secure HTTP connection used when I click on that link.
But sure, the technology stands, and I use it already on my web log.Of course, you don’t need to limit yourself to just hyperlinks.
You give examples using hyperlinks ;)
-
05.
You’re right, Arjan, that sentence wasn’t as clear as I wanted it to be; I’ve changed it now.
Also, the icons were just what was available to me; I wanted to use a keyboard key instead, but there wasn’t one!
-
06.
Unfortunately I cannot use these neat tricks because most of my users wouldn’t see them. This is especially annoying as the semantics of using actual images in these cases are questionable.
I would love to see more examples and maybe with no hyperlinks. :)
-
07.
nemeseri says:Comment » July 16th, 2007 at 11:47 am
It’s nice, but you are using CSS 2 selectors in this article.. :p
-
08.
Well, I can’t really argue with that, nemeseri; however, there are a few different CSS2.1 declarations we’ve ‘adopted’ into CSS 3 as they don’t yet have widespread (or any) browser support; attribute selectors are one example of this.
-
09.
You may run into problems with IE…
IE positions backgrounds on inline elements differently to other browsers. It’s not doing it wrong, it just wasn’t in the CSS2 spec. If your link wraps across lines, you may find your icon won’t show in IE.
-
10.
On your French link you should be using the
hreflangattribute and styling off that (although thelangattribute still holds as the text content of the link in in French).Also, CSS3 has the :lang() pseudoclass, which is better as it’s more general in its applicability besides being a byte shorter :)
-
11.
Nice article Peter.
I think the comments about icon choice are valid but ultimately it’s the method that’s important. I’ve been using this on my blogroll showing XFN and it’s a great way show information without a ton of classes.
Also, I hadn’t thought of the type attribute on links.
-
12.
Sebastian Winkler says:Comment » July 16th, 2007 at 6:23 pm
Well, if IE6 doesn’t render this either, I see no reason why not to use the more sophisticated
selector:before { content: url(your/path/goes/here.extension) }
All set in one declaration.
-
13.
@ Sebastian: IE doesn’t support generated content, and perhaps never will; at least this way, IE7 and above will show the icons.
-
14.
fearphage says:Comment » July 17th, 2007 at 6:29 am
In most cases, I prefer:
#test_selectors a[href$=".pdf"]
over
#test_selectors a[type='application/pdf']
because I don’t have to add extra properties. Another handy one is
a[href^="http://"], a[href^="https://"]
to flag external links assuming the rest of your page is relatively linked.
-
15.
Using type=”application/pdf” is semantically better, and therefore better in terms of accessibility.
-
16.
Mail says:Comment » July 20th, 2007 at 4:50 am
@ “Debates on what icons to use aside, the technique still stands.”
Negative. Accesskeys and flag use is actually being dropped.
Blind/non-blind people agree that accesskeys are a nuissance, due to different system implementation and (different) browser conflicts with shortcuts, et caetera.
And flag use… is not used. Text works pretty well for everybody. -
17.
Mail: The technique does still stand; you can debate the examples I provided all you like, but the technique is still perfectly usable.
- 18.
-
19.
Belinda says:Comment » July 24th, 2007 at 10:05 am
Nice article!
Does anyone know a solution or workaround for IE so the icons are visible if wrapping over a line?
-
20.
Neat example! I understand the benefits of the TYPE attribute over the extension match (a[href$='.pdf'] { /* */ }) but I think both have their place.
-
21.
digiTalized » Blog Archive » CSS3 attribute selectors and links Icons says:Comment » August 25th, 2007 at 8:38 am
[...] After completing my experiment, I ran across a similar one at css3.info. [...]
-
22.
20 Very Useful CSS3 Tutorials | Speckyboy - Wordpress and Design says:Comment » April 26th, 2008 at 4:56 pm
[...] 8.Using CSS 3 selectors to apply link icons [...]
-
23.
werutzb says:Comment » October 8th, 2008 at 4:45 am
Hi!
I would like extend my SQL knowledge.
I red so many SQL books and would like to
read more about SQL for my work as db2 database manager.What would you recommend?
Thanks,
Werutz -
24.
underdog says:Comment » November 4th, 2008 at 8:42 pm
I am trying this technique for the first time. However, it is not position the text to the right of the image (in either IE7 nor FF3). Using firebug, the only thing I can think of is that my tag is inside of a table. Have you run across this?
-
25.
underdog says:Comment » November 4th, 2008 at 9:19 pm
I figured out what “fixes” it… don’t know if it is the “right” way: text-indent was not working for me so I used padding.
-
26.
[...] the geeky readers, I used a CSS3 selector in order to “flag” only the links whose “lang” attribute I set to [...]
-
27.
-
28.
Welcome. The Lordos Beach Hotel is one of the leading 4 star hotels in Cyprus. Standing directly on the sandy beach of the Larnaca Bay it is ideally located …
Located near Larnaca bay in Cyprus. -
29.
[...] sayfan?n dilini gstermek [...]
-
30.
WEB 3.0 » Blog Archive » As que queras saber (casi todo) de CSS? says:Comment » April 18th, 2009 at 3:29 am
[...] Using CSS 3 Selectors to Apply Link Icons – Peter Gasston [...]
-
31.
CSS3 Exciting Functions and Features: 30+ Useful Tutorials | Noupe says:Comment » May 22nd, 2009 at 8:36 am
[...] Using CSS3 Selectors to Apply Link Icon [...]
-
32.
[...] Using CSS3 Selectors to Apply Link Icon [...]
-
33.
CSS3 Exciting Functions and Features: 30+ Useful Tutorials - Basit - Live Your Life with Inspiration says:Comment » May 26th, 2009 at 9:02 pm
[...] Using CSS3 Selectors to Apply Link Icon [...]
-
34.
[...] If you still want to use this technique, here is a tutorial. [...]
-
35.
[...] Using CSS 3 selectors to apply link icons – A quick tutorial on how to add handy icons to links. [...]
-
36.
[...] Using CSS 3 selectors to apply link icons – An interesting tutorial to help improve web accessibility by applying different styles to certain selectors link lang, application and so on. [...]
-
37.
[...] Using CSS 3 selectors to apply link icons – A quick tutorial on how to add handy icons to links. [...]
-
38.
[...] If you still want to use this technique, here is a tutorial. [...]
-
39.
[...] 使用CSS3选择器应用链接图标 [...]
-
40.
SmashingWebs: Online Show case for Designers » » 50 CSS3 Tutorials That Makes Your Works Perfect says:Comment » January 17th, 2010 at 7:51 am
[...] 3. Using CSS 3 selectors to apply link icons [...]
-
41.
50 CSS3 Tutorials That Makes Your Works Perfect – multimediaDev says:Comment » January 17th, 2010 at 12:05 pm
[...] 3. Using CSS 3 selectors to apply link icons [...]
-
42.
Using CSS 3 selectors to apply link icons | Creative Thinker says:Comment » February 17th, 2010 at 9:30 am
[...] Posted by ponmariappan in Uncategorized 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, [...]
-
43.
[...] Using CSS3 Selectors to Apply Link Icon [...]
- 44.
-
45.
CSS3: 20 tutoriales | Diseño web, accesibilidad, usabilidad, posicionamiento y optimización web - AlmacenPlantillasWeb Blog says:Comment » March 21st, 2010 at 11:38 am
[...] Using CSS 3 selectors to apply link icons [...]
-
46.
50 CSS3 Tutorials That Makes Your Works Perfect - Smashingwebs says:Comment » June 29th, 2010 at 7:36 pm
[...] 3. Using CSS 3 selectors to apply link icons [...]
-
47.
Can someone point me to a reliable source regarding the ‘type’ attribute for hyperlinks? I’ve never heard of it before..
-
48.
Great article! Bookmarked!
-
49.
50+ Stunning CSS3 Articles, Cheat Sheets and Tutorials Collections - tripwire magazine says:Comment » February 3rd, 2011 at 10:30 pm
[...] Using CSS 3 selectors to apply link icons – A quick tutorial on how to add handy icons to links. [...]
-
50.
Top 100 Useful And Detailed CSS3 Tutorials And Techniques « qeqnes | Designing. jQuery, Ajax, PHP, MySQL and Templates says:Comment » March 24th, 2011 at 11:57 am
[...] Using CSS 3 selectors to apply link icons [...]
-
51.
-
52.
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 [...]
-
53.
[...] CSS 3 selectors to apply link icons > http://www.css3.info/using-css-3-selectors-to-apply-link-icons/ -> No Responses to “Tweets for [...]
-
54.
-
55.
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 [...]
-
56.
[...] Using CSS 3 selectors to apply link icons [...]
-
57.
-
58.
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 [...]
-
59.
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 [...]
-
60.
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 [...]
-
61.
[...] Using CSS3 Selectors to Apply Link Icon [...]
-
62.
-
01.
TAG CLOUD
acid3
advanced layout
advanced layout module
Animations
background
border
Browsers
color
css
CSS3.info
CSS WG
csswg
developer tools
disabled
enabled
Feedback
firefox
firefox 3.1
flexible box layout
fonts
generated content
grid positioning
HSLA
HTML5
ie6
jina bolton
jquery
media player
Multicolumn Layout
News
Opera
Opera Dragonfly
presentations
RGBA
safari
Selectors
slides
SVG
text rendering
W3C
wasp
Web Fonts
webkit
windows
Hosting by:
Leave a Comment