I'd like the last menu item to be blue, and I'm trying to use the psuedo-class a:last child
to accomplish this. Weird thing is, it's applying the rule to a seemingly random a:link
in the middle of the menu. Can you tell me why?
site: http://www.robert-wright-books.com/STAGE
CSS:
#access {
background: transparent;
float: left;
font-size: 1.4em;
text-transform: uppercase;
overflow: hidden;
width: 238px;
margin: 36px 0 0 18px;
}
#access a:last-child { color: #006ccf }
#access ul {
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 0;
}
#access ul li { border-bottom: 1px dotted #957e5e }
#access ul li:last-child { border-bottom: none }
#access ul li a,
#access ul li a:hover,
#access ul li a:visited {
color: #432f00;
display: block;
padding: 6px 24px;
line-height: 17px;
text-decoration: none;
}
Consider that #access a
is the only a
child of #access,
the rest of the links are wrapped in LI
, and therefore LI
is the child, not A
.
#access ul li:last-child a
points to the last menu item.