Border positioning

[Lambneck]

Hi, I have an inline unordered list for navigation, and I am using css borders to divide each link. What I want to know is how can I make it so the first list item doesn't have a border to the left of it and the last one doesnt have one to the right of it?

Thanks!

 

#nav {
margin: 0 0 0 400px;
padding: 10px 0 0 0;
}

#nav ul {
list-style-type:none;

}

#nav ul li {
display:inline;

}

#nav ul li a {
font-size:20px;
border-right:1px solid black;
border-left:1px solid white;
color:gray;
margin:0;
padding:0 25px;
}

[thara]

use two class to your first and last li tag and style that classes using css

[rythemton]

You can use the first-child and last-child pseudo classes.

#nav ul li:first-child a {
  border-left: none;
}

#nav ul li:last-child a {
  border-right: none;
}

The last-child pseudo class is CSS 3, but first-child is CSS 2, so test it in many browsers to make sure it is doing what you want it to do.

[BuildMyWeb]

use two class to your first and last li tag and style that classes using css

 

i favor this approach as CSS3 is not widely supported enough for my taste