twisty.com → Bandwagon → Archives → CSS Target Trick
Spotted on Daniel Glazman’s weblog, a good use of using the CSS :target selector to highlight the active target (example). I knocked-up a simple demonstration.
:target
Published at 7:13 pm on December 17th, 2003. Topics: Markup and CSS
Thanks for the tip! I’m using this technique on my own site now.
Comment by amon-re at 10:11 pm on October 30th, 2004 #link
Nice example on Ben Hammersley’s weblog (uses this technique for highlighting footnotes).
Comment by Tim at 7:13 pm on April 28th, 2005 #link
This is not cross-browser compatible though. Make it not very useful…
Comment by AbC at 7:58 pm on September 4th, 2008 #link
Excellent! Works in FF2, Chrome, Opera, SeaMonkey and Safari.
But it dees not work in IE7. Any work arounds for IE7?
Comment by Riccol at 8:13 pm on December 17th, 2008 #link
I believe you can “fix” IE7 using some javascript to make this technique work.
Here’s a demo: http://ie7-js.googlecode.com/svn/test/target.html#bananas.
Comment by Tim at 5:14 pm on January 7th, 2009 #link
Name (required)
Mail (will not be published) (required)
Website
© 1998-2007 Tim Brayshaw · Change Style · Powered by WordPress · RSS
5 Comments
Thanks for the tip! I’m using this technique on my own site now.
Comment by amon-re at 10:11 pm on October 30th, 2004 #link
Nice example on Ben Hammersley’s weblog (uses this technique for highlighting footnotes).
Comment by Tim at 7:13 pm on April 28th, 2005 #link
This is not cross-browser compatible though. Make it not very useful…
Comment by AbC at 7:58 pm on September 4th, 2008 #link
Excellent! Works in FF2, Chrome, Opera, SeaMonkey and Safari.
But it dees not work in IE7. Any work arounds for IE7?
Comment by Riccol at 8:13 pm on December 17th, 2008 #link
I believe you can “fix” IE7 using some javascript to make this technique work.
Here’s a demo: http://ie7-js.googlecode.com/svn/test/target.html#bananas.
Comment by Tim at 5:14 pm on January 7th, 2009 #link