Nicer Footer Navigation with pseudo-selectors
Posted January 21, 2010
A common website design feature is the inclusion of navigation links (top level or otherwise) in the footer. Often, links are separated by a hyphen ( – ) or a pipe ( | ). It’s very easy to enter these separators in the markup, like so:
<a href="/">Home</a> | <a href="/about/">About</a> | <a href="/contact/">Contact</a>
I guess it’s OK to do that, but it’s not really great practice because the pipes ( | ) are not actually part of the content and are only meant for presentation, so they shouldn’t really be part of the HTML. Another problem with this is that it’s inflexible. What if we want more space between the pipes and the links? Do we enter a bunch of “ ”s? That’s ugly^.
We can use the CSS border property to add the separators for us by adding a left-border to each of the links.
“But what about the first link?“
The answer is the :first-child CSS pseudo-selector. It allows us to define CSS properties to the first element of its kind within a container. So in this instance, we can apply no border to the first child. Here’s how the lot would look:
<ul id="footer"> <li><a href="/">Home</a></li> <li><a href="/about/">About</a></li> <li><a href="/contact/">Contact</a></li> </ul>
ul#footer li { display:inline; /* so they display horizontally */ border-left:1px solid #000000; /* our 'pipe' */ padding-left:1em; padding-right:1em; } /* here it is, the first-child pseudo-selector */ ul#footer li:first-child { border:none; /* no 'pipe' before the first element */ }
It requires a bit more coding initially but it’s more elegant because it separates concerns and it’s also more accessible for screen readers and our friendly neighbourhood search engines*.
^ I know, this very site doesn’t follow this site doesn’t follow these practices. I’m a hypocrite!
* FACT
