Nth-child (3) affects nth-child(2). Why?

It’s not a bug. It’s your markup that’s the problem. And the solution being reached for is in some sense, a hack that allows one to move on without learning the point of the lesson. Even if you have passed, I would still go back and fix it so the lesson has a take away. Just saying.

Anyway, here’s the problem:

<br/>

This tag is a child of the same parent, a sibling element. That makes it the second and the fourth child of BODY. The links (anchors) are first, third and fifth. So you have two choices:

1. Remove the BR’s (recommended); or,
2. Change the pseudo-class to point to the correct child

The latter we can do in a number of ways, but let’s go with what is expected:

a:nth-child(5) {} /* fifth child, third anchor */

or,

a:nth-of-type(3) {} /* third anchor */

In this exercise it turns out the third anchor is also the last anchor, and last child so we could write,

a:last-child {}

or even,

a:last-of-type {}

In the present setting, all of these selectors match the same element.

Aside: Now if we want to stack up links we have a few methods available. One would be to declare the group of anchors to have display property, block. We wouldn’t need <br/> in our markup (they are kind of clunky and meaningless) and the links will display on separate lines.

Another would be to wrap each link in a block element like a DIV or a P. Again, they would display on new lines. The method I most favor, though, because it has both grouping and display built in, is the unordered list.

<ul class="nav-left">
    <li><a href="http://codecademy.com">Cademy</a></li>
    <li><a href="http://facebook.com">Booker</a></li>
    <li><a href="http://google.com">Google</a></li>
</ul>

We have a nice neat grouping that share a common ancester, UL with class=”nav-left” to set the list apart from any others on the page. Can’t say how much this lends itself to semantics,as well.

The LI element is by default a block element so will behave exactly like DIV. We will need to strip away a couple of built in style properties, but we can do this with UL from which it inherits both margin and padding:

.nav-left {
    list-style-type: none;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 8em;
}

Now there are no style properties relating to bullets, margin or padding so the list is tight up to the left edge of its view port.

With that out of the way, we can now style the LI’s and the A’s they contain with any number of properties including margin and padding, text alignment, font-family, size, etc., and link behavior for the different states, raw, link, visited, focus, hover and active. All of this is working toward the design layout we desire.

Remember, the A’s are children of LI (each a first child, btw) so inherit from LI any properties that can be inherited such as font, background color (but not foreground) and a host of others that might come into play. When defining properties it is worthwhile determining if there is inheritance or not, and any that can be inherited give to the parent, not the child. This way we don’t over complicate the properties we give the anchors.

.nav-left li {
    font-family: Verdana, sans-serif;
    font-size: 1.2em;
    text-align: right;
    border: 1px solid #999;
    padding-right: 0.5em;
    margin-top: 2px;
    background-color: #fee;
}
.nav-left li:after {
    content: " •"
}
.nav-left a {
    color: #339;
    line-height: 2em;
    text-decoration: none;
}
.nav-left a:hover {
    color: #933;
}

Here is another slight variation that improves the links by making them more button like:

.nav-left a {
        color: #339;
        line-height: 2em;
        text-decoration: none;
        display:inline-block;
        height:2em;
        width:100%;
    }

It adds three properties to the selector rule from above.