{
  "$type": "site.standard.document",
  "createdAt": "2022-05-03T16:45:00+01:00",
  "description": "If you're in need of an extremely basic client-side router that uses no JS at all, have I got news for you!",
  "path": "/stream/target-navigation",
  "publishedAt": "2022-05-03T16:45:00+01:00",
  "site": "at://did:plc:swxoj3wjlwodcqs5ipmvgnug/site.standard.publication/3mnv7gbn3czno",
  "tags": [
    "Web",
    "Code"
  ],
  "textContent": "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 <style> #about { color: blue; } #about:target { color: red; } </style> <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: See the Pen :target navigation by Charles Harries (@charlesharries) on CodePen.",
  "title": ":target navigation",
  "updatedAt": "2022-05-18T17:44:47+01:00"
}