Links, Text, and Custom Fonts - Jump Start CSS - page 117

Figure 4.8. After adding our custom fonts and making the Chelsea Market text uppercase
Before we move on to the Lato font and the headings further down on the page, let's address
the size and alignment of the text in the main navigation. We already added the uppercasing,
but what else is missing? There are two things we can correct here: First, we'll bump the size
of the font up to 20px, and then we'll fix an extra margin issue.
In our CSS, we already have a selector targeting the list items inside our navigation, so let's
add one line to that rule set, and add another rule set below it:
nav ul li {
display: inline-block;
*display: inline; /* for IE7 */
margin-right: 30px;
font-size: 20px;
}
nav ul li:last-child {
margin-right: 0;
}
Here we've adjusted the font size to 20px, which adds to the existing styles on our list
items inside the <nav> element. But more importantly, we've introduced a new selector: the
:last-child pseudo-class.
In Chapter2 , weaddeda30pxrightmarginonallofourlistitems.Thiscausedthenavigation
section to be pushed too far to the left. We also set the <nav> section to have 177px of right
margin, but there's an extra 30px added to that because of the 30px right margin set on the
last list item.
The :last-child pseudo-class used in combination with the “ nav ul li ” selector tells
the browser to target only the last list item. Here we've set the right margin back to 0 , giving
us the correct amount of space.
This is a good method to keep in mind because it's often desirable to remove styles on
specific elements—say, the first or last element. CSS offers not only :last-child , but
also :first-child , and a number of other pseudo-classes. Using these specialized select-
ors prevents us from having to add extra classes or IDs to elements, which would be the only