How to Put Your CSS3 on :target

CSS pseudo-classes which change styles in response to user actions have been with us for many years. You’ve almost certainly used :hover, :active and :focus; I can (only just) remember the excitement of changing IE4’s link colors back in 1997.

CSS3 also introduced :target; a powerful pseudo-class which can reduce the need for scripting in interactive widgets. Consider a page URL such as http://mysite.com/page#mytarget; an element with the id “mytarget” can have matching :target styles applied.

:target Browser Support

All modern browsers support :target and you won’t experience problems with IE9 or most versions of Chrome, Firefox, Safari and Opera. Unfortunately, that still leaves us with the older versions of IE. I wouldn’t worry too much about IE6 and 7, but IE8 remains the world’s most used browser version. All is not lost, however, since shims such as selectivizr can add :target support without requiring complex workarounds.

A Simple Document :target

We’ve recently been discussing website contracts. Generic contract small print such as payment schedules, hosting conditions, cancellation terms, support policies, glossaries etc. could be contained in one or more web pages. The document could grow to a considerable length even if you try and keep it concise!

Craig is a freelance UK web consultant who built his first page for IE2.0 in 1995. Since that time he's been advocating standards, accessibility, and best-practice HTML5 techniques. He's written more than 1,000 articles for SitePoint and you can find him @craigbuckler

http://www.outlookstudios.com Outlook Studios

This is a great step forward for CSS3 to be able to implement such a feature without using Javascript. Amazing!

http://www.sensibleweb.co.uk Sensible Web

A hidden or largely unknown gem – thank you.

http://www.optimalworks.net/ Craig Buckler

You’re welcome. I didn’t know about :target until recently — but I wasn’t sure whether it was just me!

http://www.itmitica.com/en/ itmitică

I can’t help but think that instead of ruining a good thing like CSS with stuff like animation and such we should simplify and does employ the use of the natural choice, Javascript. And jQuery is sure to help in this way.

And browser makers should really break ground with around more serious CSS, not fool around whistles and bells. They should let CSS be CSS and make Javascript more accessible instead.

http://www.optimalworks.net/ Craig Buckler

HTML5 and CSS3 offer many features which required JavaScript a few years ago. I was originally skeptical about CSS animations but I’m increasingly in favor — it makes web pages smaller, faster and easier to create.

http://www.itmitica.com/en/ itmitică

My point exactly.

When the vogue changes, would these bright and shiny HTML5 and CSS3 feats look like… blinky?! Chasing the next “big thing” every other year to be implemented in browsers would never be able to catch up with the speed the next big thing follows.

Realistically, HTML5 and CSS3 also produce a lot of garbage vogue implementations in detriment of good and solid basics, that are still missing. That’s the problem, the way I see it, and I strongly believe that simlper Javascript code can and should cover the garbage vogue faster and longer.

Jess

Whoa… nice! I wasn’t aware of this and can see myself using it. Cool and practical – I love it!

http://levelonewebdesign.com Thomas Jay

Very slick. Somehow, in all my CSS3 reading, I managed to miss this one. Fantastic tutorial as always Craig!

http://www.optimalworks.net/ Craig Buckler

You’re welcome, Thomas!

http://hectorcervantes.ca Hector

Thanks for sharing this, actually this is missed a lot from developers.

http://joezimjs.com Joe Zim

This seems like it could be used to make tabbed interfaces without JavaScript, which is awesome! Too bad this is CSS stuff so it doesn’t really fit onto my JavaScript blog. Oh well, still a great piece of web development knowledge.

http://www.optimalworks.net/ Craig Buckler

Absolutely – watch out for a few :target widgets soon…

http://joezimjs.com Joe Zim

I’m assuming you already had in mind to make a tabbed interface with :target, but it’d be super cool if you got the idea from me. ;)

i stumbled across this site not too long ago. there are some cool examples of things like image galleries and accordion menus using :target

http://popdigital.ca AJ

At first I was with the rest of the crowd thinking that this is a good and often-overlooked CSS feature. However, I went to the demo page, clicked on the links a bunch of times to try it out, and then had to click a whole whack of times on my browser’s back button to get back to this page, cycling through all my clicks in reverse. The problem with this pseudo-class is that, because it uses anchors, and each anchor gets registered in the browser history, it’s not so good for use in tabs, menu, or navigation elements.

http://www.optimalworks.net/ Craig Buckler

I’m not sure I agree. First, it means you can create a good tabbed widget without scripting which reduces file sizes and has accessibility benefits. Also, clicking ‘back’ returns you to the last section you were viewing – isn’t that more appropriate than returning to the previous page? Besides, you can easily apply a little scripting if you don’t want that to happen.

http://www.kreativtheme.com Kreativ Theme

I never knew about the target option until today … this is a cool css feature … hmmm … now … where can I use it !?

http://www.digitalidiom.co.uk Delboy Uk Web Designer

Well I never, They kept that one quiet !!
How useful is that? What a find, well done. I think I can see the potential for this for things like FAQs – And sending people to the right section on a new page will save them scouring for it themselves… it’s in my web tool box already!.

http://webcitymaster.com Fredz

Thanks for this great little article. Concise, the right amount of info, and most importantly, it worked!
While I just fell in love with JQuery, this is much easier than attaching a click function to each ID
like
$(‘#payment’).onclick(function(){
$(this).css( ‘selector’, ‘property’; );
} //this should be a toggle function, because that’s the way the “target” pseudo-class works.
Way cool. Thanks
Fredz