Hello all, I can't figure out why border-right-style: none; doesn't remove the right border from the last link. Here's my code.


`<div id="nav">`  
  `<div id="navcontainer">`  
    `<ul id="navlist">`  
       `<li id="active"><a href="#"  class="page_nav" id="home">Home</a></li>`  
       `<li><a href="#" class="page_nav" id="contact">Contact </a></li>`  
       `<li><a href="#" class="page_nav" class="page_nav_last" id="links">Links</a></li>`  

and here's my css:
#nav_content { background-color: #036; width: 100%; }

#navcontainer ul {

padding-left: 0;
margin-left: 0;
background-color: #036;
color: White;
float: left;
width: 100%;
font-family: arial, helvetica, sans-serif;

#navcontainer ul li { display: inline; }

#navcontainer ul li a {

padding: 0.2em 1em;
background-color: #036;
color: White;
text-decoration: none;
float: left;
border-right: 1px solid #fff;

#navcontainer ul li a:hover {

background-color: #369;
color: #fff;

.page_nav_last {

border-right-style: none;

Any ideas why this wouldn't work?

2 answers

This was chosen as the best answer

you've declared the class twice in the html.


<li><a href="#" class="page_nav page_nav_last" id="links">Links</a></li>

and be more specific with the CSS like this:

#navcontainer ul li a.page_nav_last {border-right-style: none;}

because you specifically addressed the link with a parent id and parent types, you can't over-ride it with just a class declaration.

but you also need to put all classes that apply to an element in a single class="" attribute in the html.

Answered over 9 years ago by Tony Crockford
#navlist > li:last-child {
 border-right: none;

And there it is, three lines of simple CSS.

Answered over 9 years ago by Anthony Lemmer
  • Unfortunately, not yet widely supported enough to be useful - Not supported by Explorer 6- on Windows. Explorer 7, Safari 3.0, iCab only support :first-child. Tony Crockford over 9 years ago