O'Reilly

CSS :target

By on  

One interesting CSS pseudo selector is :target.  The target pseudo selector provides styling capabilities for an element whose ID matches the window location's hash.  Let's have a quick look at how the CSS target pseudo selector works!

The HTML

Assume there are any number of HTML elements with a given ID:

<h2 id="section1">Section 1</h2>

<h2 id="section2">Section 2</h2>

Take note of the ID values of the elements above -- to trigger the :target pseudo selector, the window.location.hash will need to match.

The CSS

The :target pseudo selector may be applied to classes, tags, or any other selector:

/* would apply to all targetted elements */
:target {
	color: #000;
}

/* applies to H2's */
h2:target {
	color: #f00;
}

When the window.location.hash is "section2", the element color will become red and underlined.  Simple!  Much like you can animate elements upon hover or even between media queries, you could even animate the element when targeted; Chris Coyier provides an excellent example of target animating.

:target is neat but I haven't seen it abused to do anything groundbreaking.  For a site that doesn't strive for ultimate dynamism, however, the :target pseudo selector could add a bit of native class when using window hashes.

Track.js Error Reporting

Recent Features

Incredible Demos

  • Drag. Drop. Lock.

    I've received dozens of emails about my Six Degrees of Kevin Bacon Using MooTools article. The MooTools in my article contained a lot of conditional code to require correct dropping per the game and many people requested that I simplify the process and just...

  • Scrolling &#8220;Go To Top&#8221; Link Using Dojo

    One of the most popular code snippets of posted on my blog has been the scrolling "Go To Top" link snippet. The premise of the snippet is simple: once the user scrolls an element (usually the BODY element) past a given threshold, a "Go...

Discussion

  1. Hi David,

    I think one of the reason that make this technique hard to use in large websites could be the unability to create multi-level lists with this :

    Example :

    Four links in 2 categories
    – #category1-link1
    – #category1-link2
    – #category2-link1
    – #category2-link2

    Category 1

    Link1
    Link1

    Category 2

    Link1
    Link1

    Then, this way you can style the 2nd-level links (#categoryX-linkY), but how can you know how to style #category1 and category2? You can’t. Because #category1:target and #category2:target never happen.

    The only solution I see is parent selectors but it’s not even implemented in browsers yet.

  2. First thing for :target use that comes to mind “tabs” nothing else…

  3. SVG stacks use :target to great effect. Too bad they’re not more widely useful yet.

  4. Another valid use I’ve come across is accordion widgets.

  5. Yin

    Not sure if I can think of a good use for this yet, but it’s great to read about it. I think the code:

    h2:target {
    color: #f00;
    }

    should be

    h2:target {
    background: #f00;
    }

  6. very good idea!
    Even for dynamic pages.

    http://jsfiddle.net/b3YEk/17/

  7. The only problem right now is bad support in IE, which doesn’t remove or re-add the pseudo-class when you use back and forward navigation.

  8. Joe

    I was aware of :target, but this has prompted me to use it for a great use case: help docs.

    Now I can just link people to the ID of a specific part of a help guide and it will automatically highlight the relevant passage.

    Perfect.

  9. @DrDeath, quite limited imagination. How about a FAQ Page that has all the questions first and the answers at the bottom? If there are many, using :target to highlight the answer for the question that you clicked would make it easy, since several answers would be shown on the screen at the same time.

    • Wayne

      @Gabriel Rodriguez, your imagination may well be a tad limited too. Instead of having all the answers displayed and highlighting the relevant ones, why not display just the relevant answer? (Mind you, I haven’t actually tested this theory of mine yet. But it seems like it should work, unless I’ve misunderstood how :target functions.)

  10. @Gabriel Rodriguez i think accordion better for faq page

  11. Using :not(:target) gives you even more flexibility, because you can also style the elements that are not :target, and even apply transitions to them :)

    http://jsfiddle.net/SchizoDuckie/fzZ9d/

    • Wayne

      Sweet demo! Thanks for sharing.

      Incidentally, not that it would be appropriate for that demo (because it definitely wouldn’t), did you know that setTimeout can be used without a second parameter? In other words, it can be used just to set the execution order of functions. (Only recently did I discover that little tidbit.)

  12. When do you guys expect Internet Explorer will have full support for these kind of elements?

    • SchizoDuckie

      Probably somewhere between 2020 and 2030. And then you’ll still have to wait for adoption rate…

  13. Leandro

    Hey SchizoDuckie, looks like you’re wrong! haha (after a long time) http://caniuse.com/#search=%3Atarget

    internet explorer finally over, microsoft will implement your new browser, now, the things go more faster

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!

Recently on David Walsh Blog

  • Loading Static Templates for Intern Testing

    I use Intern by SitePen for all of my JavaScript functional testing.  Intern has loads of features other functional test frameworks don't and it's completely Promise-based -- something I got very used to when I used the Dojo Toolkit every day. Async test creation can...

  • Convert Video to mp3

    Let's all be honest for a moment:  we've all ... not paid for ... music.  Whether it was via a file sharing app like Kazaa or Napster, or it was downloading and seeding on bittorrent, or maybe even downloading a music video and ripping its audio,...

  • Sort git Branches by Date

    I'll be first person to admit I don't do as much git repository maintenance as I should.  I rarely delete branches which have been merged, so a git branch execution shows me a mile-long list of branches that likely aren't relevant.  The best way to find branches I've recently...

  • Best Tools and Resources for Web Professionals in 2015

    Looking for the right resources to help you satisfy the needs of your clients? On the lookout for the best tools to help you increase your revenue? Searching for the right software to help you improve your business? Well, then you’ve come to the right place....

  • JavaScript Polling

    Polling with JavaScript is one of those ugly but important functions within advanced front-end user experience and testing practices.  Sometimes there isn't the event you can hook into to signify that a given task is complete, so you need to get your hands dirty and simply poll for...