:target navigation

The :target CSS selector doesn't get the love it deserves. I'm at pains to find a spot anywhere on the Internet where I've seen it used to much effect; it's usually elbowed out by :active for hash navigation within a page.

What it does, in basic terms, is give you a handle for styling elements when their id attribute matches the URL's current hash. So e.g. given some markup like

#about {
	color: blue;

#about:target {
	color: red;

<p id="about">About me</p>

If the current URL is example.com/#about, the text will show up in red; otherwise, it'll show in blue.

The above example isn't very useful, even if it is (hopefully) illustrative. But :target allows us to do other fun stuff, like create a very simple client-side no-JS router based entirely on the page hash:

Web Code


No One Is Talking About This


SpaceX docking simulator

SpaceX has created a browser-based app simulating docking with the ISS, and it's a fantastic example of what is capable on the web.