Viewers: in countries Watching now:
Join James Williamson, as he shows you how to create elegant menus, links, and buttons that help visitors navigate your site faster and more intuitively. The course covers creating structured navigation that is accessible and clean, styling links, and building horizontal and vertical menus with rollover effects. The last chapter reveals how to create stylish buttons with special effects and CSS sprites.
We are almost finished with our menu, but we have one little bit of housekeeping to do before we are totally done. You may have noticed that all of our links have a bottom-border, including this last one. Since the border's function is to provide visual separation between the links, it really doesn't belong on this last menu item. You are going to run into this problem over and over again when you're styling menus. Regardless of whether it's a horizontal or a vertical menu, you're bound to have some extra padding, margins, borders, or some other property on either the first or last menu item, sometimes both.
In a lot of cases, that won't be that big of a deal, but for others, it really might be the difference between the menu actually fitting within the layout or it actually working or not. Let's see how we can clean that up. Now, before I jump into the code and start working with our file, I want to take you over to the W3C's Selectors Level 3 specification. And we are just focusing on one small section of it, and this is a little rundown of all of the different selectors. I just want to point out a couple of these that can be extremely helpful when you're trying to target the first or last element within a structure.
So, we have the first-child and last-child selectors. We have first-of-type and last-of-type. We also have only and only-of-type, but they are not really that useful for us for menus. Then we have these nth selectors, which are a little bit more complex. But these guys right here, first-child, last-child, first-of-type, and last-of-type, those can be extremely helpful when you are dealing with a menu, and you need to select the first menu item, or the last menu item and change the styling or restrict the styling in some way. Notice that those are pseudo-class selectors, exactly the same as hover and active and focus, and those types of things.
So, very easy to use, we're familiar with using hover. And these selectors are the ones particular that I'm talking about actually enjoy pretty widespread support among browsers. So, I am going to go back into my code editor, and I am just going to scroll down all the way to the bottom of our CSS, and I just need to create one more selector. So, I am going to go down and create a little empty space here, and I am going to type in li:last-child a. So, think about what this is actually doing is it's saying, hey, go into the page, find all of the list times.
The list items that are the last child of their list, meaning the last one in the list I want you to find and target the anchor, or the link tags inside of that. So it's a very nice, easy way to do that without having to go down into your list and apply classes to them, which is what we used to have to do before we had the selectors available to us. And all we have to do inside this selector-- it's very easy--we just need to tell it for the border-bottom that we want none. So, I am going to go ahead and save that, go back out to my browser, and just refresh the page.
And sure enough, our last menu item no longer has that border. And that's it, here is our finished vertical menu. It's a very simple menu. But the core techniques that you've learned here can be expanded to create more complex visual menus. Keep this last technique handy, as you're going to need to restrict styling in some way, in almost every single menu you create. Feel free to experiment with this menu, modify the styling and see what you can come up with. Once you are comfortable with the steps that I've outlined in this chapter, be sure to check out this chapter's lab, and put your new skills to the test.
There are currently no FAQs about CSS: Styling Navigation.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.