For my first web design/css tuto­r­ial, I wanted to talk about a prob­lem that I had, and how I solved it. This is pretty sim­ple stuff, but it took me a while to grasp the idea, so I thought I’d share it with the half-dozen of you who do this sort of work.

Below is a screen cap­ture of a footer of a blog I’m design­ing for a client. Typically, I like to include the nav­i­ga­tion redun­dantly at the bot­tom of a page so that, rather than scrolling back to the header, a user can jump to wher­ever they want to go next. You’ll see this kind of basic redun­dant nav­i­ga­tion in a lot of places.

The lit­tle line between links is called a pipe, and as a sep­a­ra­tor, it is pretty com­mon. It’s just a sim­ple lit­tle visual ele­ment to help delin­eate between the nav items. The trou­ble comes in when you want to use these in com­bi­na­tion with dynam­i­cally gen­er­ated code from WordPress.

The List Code

First off, nav­i­ga­tions should pretty much always be a list in html. That’s what lists are for, and styling them is great and easy. And, coin­ci­den­tally, WordPress returns a call for pages with list code. So the HTML for this list of links looks like this:

<ul>
<li><a href="#" title="Home">Home</a></li>
<li><a href="#" title="Blog">Blog</a></li>
<li><a href="#" title="Fiction">Fiction</a></li>
<li><a href="#" title="Other Writing">Other Writing</a></li>
<li><a href="#" title="About Rudi">About Rudi</a></li
</ul>

I stripped out some classes that WordPress adds auto­mat­i­cally, as I don’t need them here. All of the above is con­tained in a div with an id of #footer. So, note that nowhere in that code is the pipe ite­self. That’s because I am adding the pipe with CSS. You can add char­ac­ters with CSS, you ask? Yep!

The CSS

#footer ul {list-style-type:none; position:absolute;
            left:300px; top:27px; font-size:16px;}
#footer ul li {display:inline; color:#e3bd8e;}
#footer ul li:after {content:" |";}

So what’s going on here? First of all, I am using Eric Meyer’s CSS Reset above this, so all of that default padding and styling on a list has been stripped. This means the only styling that hap­pens is the styling you want, and it cre­ates a base­line between browsers. It really makes my job easier.

So we’re styling the list itself to have no bul­lets, and we’re posi­tion­ing it absolutely within the con­tainer. You don’t have to do that, but I just found it eas­ier for my needs in this par­tic­u­lar footer. Next, I wanted the list all on one line, so I added display:inline. Finally, I’m using the pseudo class :after and the prop­erty con­tent to insert a space and the pipe after each item on the list. Say my client wants these items sep­a­rated instead by an aster­isk? Easy enough to change across the entire site with that one line.

Pseudo classes aren’t some­thing I often use, so the next thing I wanted to do tripped me up. The code above will add a pipe after each li tag, but I don’t want one on the last one. There’s no rea­son for it. How in the world do I do that? I know how to use the :last-child pseudo class, but it alone wouldn’t let me remove the pipe. Turns out, you can and should chain together pesudo classes

#footer ul li:last-child:after {content:" ";}

I prob­a­bly could have set that to content:none as well, now that I think about it. But a plain space in my case works just fine.

So there you have it. The moral of the story? Chain pseudo classes together to get what you want. Any questions?

Related Links:

• CSS Pseudo Classes
• Eric Meyer’s CSS Reset Stylesheet
• Listamatic

Tagged as: CSS, html, pseudo class, Tutorial, Web Design