Search code examples
htmlcssstylesheetcss-selectors

pseudo-class :last-child weirdness


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;
}

Solution

  • 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.