More body ID fun
21st January 2003
Scott Andrew points out another smart trick with body tag ID attributes—selectively showing and hiding navigation elements depending on the current page. This is a really neat idea, but it does lead to a blurring of the lines between structure and presentation—if a navigation section isn’t relevant to a particular page this should be mirrored in the markup rather than worked around by the CSS. That said, there are some nice presentational touches which could be achieved with this technique without sacrificing structural purity, such as highlighting the navigation menu item for the current page in a different colour:
body#aboutpage li#aboutlink {
background-color: red;
color: white;
}
<body id="aboutpage">
...
<ul class="subnav">
<li id="newslink"><a href="/news/">News</a></li>
<li id="aboutlink"><a href="/about/">About</a></li>
<li id="contactlink"><a href="/contact/">Contact</a></li>
</ul>
...
</body>
But then I suppose you could argue that the link to the current page shouldn’t be a link at all.
More recent articles
- Porting the Moebius 0.2B image inpainting model to run in the browser with Claude Code - 22nd June 2026
- sqlite-utils 4.0rc1 adds migrations and nested transactions - 21st June 2026
- Datasette Apps: Host custom HTML applications inside Datasette - 18th June 2026