:target navigation
Charles Harries
May 3, 2022
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 me
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: See the Pen :target navigation by Charles Harries (@charlesharries) on CodePen.
Discussion in the ATmosphere