How to Add a Pipe to CSS Navigation

In website navigation, pipes are the thin lines separating menu items. Often designers make these subtle, and they add to the visual cues that make your navigation more usable. Since website menus are coded as bullet lists in HTML and converted to menus in CSS, you should add the pipes by giving each list item a right-hand border. The problem with this method is that it adds a border to the last item, which you will not always want. Using “:last-child,” however, you can tell the browser not to add a border to the last list item.

Instructions

1. Open the stylesheet for your website in Notepad or a code editor. Find the styles for your navigation bar:

   #navbar {
   properties and values go here
   }

   How your code looks can very greatly depending on things like ID and class names used.

2. Add a border on the right of every list item in the navigation bar:

   #navbar li {
   float: left;
   border-right: 1px solid black;
   }

   Use a hexadecimal color or named color as shown. The style rule where you add the border will already have “float: left” set, since that makes the navigation horizontal. You will now see a pipe between every link in the bar, including the last item.

3. Use the “:last-child” pseudo-class to remove the last pipe because it looks awkward and is not needed. Create a new style rule and set the border to zero:

   #navbar li:last-child {
   border-right: 0;
   }

Tips & Warnings

• Experiment with different border styles other than “solid” to create different pipe styles. Possibilities include “dashed” and “double.”

• When using “:last-child,” it is important that there are no other tags nested in the “<ul>” tags that create the menu. Otherwise the browser will not recognize the last list item as the last child of the bullet list.