:target navigation

Charles Harries May 3, 2022
Source
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

Loading comments...