Facebook
Twitter
iLike
Last.FM
Flickr
MySpace
January 21, 2003
More On BODY IDs
Mark Pilgrim pointed out how using body IDs allows one to apply CSS rules to specific pages using a single stylesheet, without using server-side includes. It occurs to me you can use this approach for a number of things, including selectively hiding/displaying page elements. For example, on the WaSP site, we used a special server-side include to pull in the navigation links with the appropriate subsection links exposed. If we had used CSS IDs instead, we’d only have to manage one include file of links, hiding the ones we didn’t want exposed:
ul.subnav
{
display:none;
}
body#aboutpage #aboutnav ul.subnav
{
display:block;
}
<body id="aboutpage">
<li id="aboutnav">
<a href="/about/">about</a>
<ul class="subnav">
<li><a href="/about/bios/">bios</a></li>
<li><a href="/about/colophon/">colophon</a></li>
<li><a href="/about/contact/">contact</a></li>
<li><a href="/about/history/">history</a></li>
<li><a href="/about/mission/">mission</a></li>
<li><a href="/about/sitemap/">sitemap</a></li>
</ul>
</li>
...
</body>
It’s such an obvious and cool trick.
