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!

Let’s look at a snippet of the document’s HTML5 in contract.html:


<h1>Website Contract</h1>

<nav>
	<ul>
		<li><a href="#payment">Payment Schedule</a></li>
		<li><a href="#support">Support &amp; Maintenance</a></li>
		<li><a href="#hosting">Hosting Terms</a></li>
		<li><a href="#glossary">Glossary</a></li>
	</ul>
</nav>

<article id="payment">
<h2>Payment Schedule</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</article>

<article id="support">
<h2>Support &amp; Maintenance</h2>
<p>Ut euismod tempor porttitor.</p>
</article>

<article id="hosting">
<h2>Hosting Terms</h2>
<p>Suspendisse ac nisl lorem, ut fermentum erat.</p>
</article>

<article id="glossary">
<h2>Glossary</h2>
<p>Aenean id nibh eget nisl blandit hendrerit lobortis ac tortor.</p>
</article>

We can use the :target attribute to highlight active sections, e.g.


article:target
{
	background-color: #ffc;
	border: 2px solid #fcc;
}

Anyone viewing the contract can click a navigation menu item to highlight the appropriate section. You can also issue direct links to clients who require specific information, e.g. contract.html#support.

The :target selector offers further versatility — it’s possible to create dynamic effects in HTML5 and CSS without using JavaScript. Further SitePoint articles are coming soon…

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • 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. ;)

  • http://www.markkahn.com mark

    Thanks for the slick trick!

  • http://www.illusions-art.com chad bennett

    http://playground.deaxon.com/css/

    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

  • http://crowdogs.com Peter Schreiner

    Great tip! What other goodies lurk in the shadows, I wonder.

  • http://www.drlinux.no/ Dr Linux

    Awesome, thanks! I’ve just used your tip to easily high-light parts on my info pages.