Using the CSS :target Selector

The CSS :target pseudo-selector in CSS matches when the hash in the URL and the id of an element are the same.

<section id="voters"> 
   Content
</section>

:target {
   background: yellow;
}

While that URL is as it is, that section element will have a yellow background, as per our CSS.

When would you use this?

One possibility is when you want style with “states.” When the page has a certain hash, it’s in that state. It’s not quite as versatile as manipulating class names (since there can only be one and it can only be related to one element) but it’s similar. Anything you could do changing a class to change state you could do when the element is in :target. For instance: change colors, change position, change images, hide/show things, whatever.

I’d use these rules-of-thumb for when :target is a good choice:

1. When a “state” is needed
2. When the jump-down behavior is acceptable
3. When it’s acceptable to affect the browser history

We’ll touch on all these things in this article.

How do you get hashes in URLs?

The most common way is by a user clicking a link that includes a hash. Could be an internal (same-page) link or a fully qualified URL that happens to end with a hash and value. Examples:

<a href="#voters">Go To There</a>

<a href="http://example.com/#specific-part">Go To There</a>

Jumping Behavior

Regardless if it’s a same-page link or not, the browser behavior is the scroll the page until that element is at the top of the page. Or, as far as it can if it can’t scroll that far. This is rather important to know because it means exploiting this “stated” behavior is a bit tricky/limited.

For instance, I once tried a variety of techniques to replicate functional CSS tabs, but ultimately decided using the checkbox hack was a better idea because it avoids the page-jumping issues. Ian Hansson at CSS Science has some examples of tabs as well. His third example uses :target, and absolutely positioned elements hidden above the top of the page to prevent page jumping behavior. It’s clever, but not really a solution, because that would mean the page would jump upwards should the tabs be down further on a page.

A perfect use: highlighting sections

Here’s a problem: When a hash-link sends you flying down the page to the relevant section, it will try and make that section snug against the top of the browser window.

But what if there isn’t enough room to scroll beneath that section? That section will be visible, but it won’t be snug against the top, which can be weird and confusing.

I’m not just making that up. From personal experience, page-jumping links that don’t take me to somewhere where was I was linking to is exactly on the top, I get all out of sorts. I find it happens all to often on things like FAQ pages where the linked-to sections often aren’t very tall.

So let’s solve that!

One historical method was called the Yellow Fade Technique. It was employed by 37 signals in situations where new content is added to the page, and they were trying to draw the user’s attention to it. Jonathan Snook ported that idea to CSS and combined it with :target.

Instead of yellow fade, we’ll indicate which section the link we just clicked was referring to by nudging it over to the right and flashing a red border. Instead of making you think, here you go:

The structure is a bit of navigation that links to sections by ID:

<nav>
  <a href="#one">1</a>
  <a href="#two">2</a>
  <a href="#three">3</a>
</nav>

<section>
  <div id="one"><h2>One</h2>Pellentesque habitant morbi ...</div>
  <div id="two"><h2>Two</h2>Pellentesque habitant morbi ...</div>
  <div id="three"><h2>Three</h2>Pellentesque habitant morbi ...</div>
</section>

When the sections become in :target, they scoot over to the right a bit via translateX transform (prevents any weird text wrapping or anything we might get with padding) and a red border flashes on via keyframe animation.

:target {
  animation: highlight 1s ease;  
  transform: translateX(20px);     
}
@keyframes highlight {
  0% { border-left-color: red; }
  100% { border-left-color: white; }
}
section > div {
  border-left: 40px solid white;
  padding: 10px;
  transition: all 0.5s ease;     
  padding-right: 50px;
  margin-left: -20px;    
}

That’s all there is too it really. I’d chalk this up under progressive enhancement, if you’re worried about browser support. As in, it’s just a nice touch, not vital.

View Demo

Fighting the Jump!

Let’s say you like the idea of using :target for states but dislike the page jumping behavior, you can change the hash link in a URL without a page jump.

Using jQuery, you could target all hash-links, prevent their default behavior, and use pushState (or replaceState, I suppose) to change the URL (which won’t move the page).

$("a[href^=#]").on("click", function(e) {
  e.preventDefault();
  history.pushState({}, "", this.href);
});

You could interchangeably use replaceState there too, which would change the URL without adding an entry to the browser history. Sometimes you might want that, sometimes you might not. At least you have a choice here, which you don’t with the default behavior of clicking a hash link, which always adds.

But there is bad news

When the URL changes to a new hash, you’d think the current target would change and new CSS would take effect. It doesn’t (tested current WebKit and Firefox at time of this writing). It’s a bug.

Theoretically, you could measure and save the current scroll position of the page, let the link move it naturally, then set it back to where it was. But that just sounds so awful I couldn’t even bring myself to make a test page for it.

More

• The spec in Selectors Level 4 (no significant new stuff from what is above)
• A simple image gallery using :target (suffers from the page jump thing, good example of that) by Chris Heilmann
• Demo of yellow fade technique (although for existing content, not newly-added content) from Web Designer Notebook.
• A CSS Target, literally, by Caleb Ogden. (Offline now, but the Wayback Machine has a mangled version of it.)