October 11, 201213 yr how do i remove the last border-right property on my last list item? as im going with a line inbetween the list items to give them a nice seperation look? body { font-family: Palatino Linotype, Book Antiqua, Palatino, serif; font-size: 14px; color: #333333; } #pageHeader { width: 900px; border: solid 1px #999; border-bottom: none; background-color: #F4F4F4; overflow: hidden; } #pageContent { width: 900px; border: solid 1px #999; background-color: #F4F4F4; } #pageFooter { width: 900px; border: solid 1px #999; border-top: none; background-color: #F4F4F4; } /* Header Divs */ #logo { width: 210px; height: 98px; margin: 5px 0px; border-right: solid 1px #999; background-image: url('../img/store_logo.png'); background-repeat: no-repeat; float: left; } #navigation { width: 689px; height: 98px; float: left; text-align: left; } /* Navigation Menu */ .nav ul { margin: 0px; padding: 0px; float: right; list-style: none; } .nav li { width: 100px; text-align: center; float: left; border-right: solid 1px #999; } .nav a { font-size: 16px; text-decoration: none; color: #333333; } <!DOCTYPE html> <html> <head> <title>Store Home Page</title> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style/style.css" /> </head> <body> <div align="center" id="mainWrapper"> <div id="pageHeader"> <div id="logo"></div> <div id="navigation"> <div class="nav"> <ul> <li><a href="#">Home</a></li> <li><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> <li><a href="#">Link3</a></li> </ul> </div> </div> </div> <div id="pageContent">Test</div> <div id="pageFooter">Test</div> </div> </body> </html>
October 11, 201213 yr remove the border-right from your .nav li then create a new one something like this .border { border-right: solid 1px #999;} then put your html as <ul> <li class="border"><a href="#">Home</a></li> <li class="border"><a href="#">Link1</a></li> <li class="border"><a href="#">Link2</a></li> <li><a href="#">Link3</a></li> </ul> that will give you what you want
October 11, 201213 yr I wouldn't do what David suggested, because it adds very unsemantic class names (and too many of them too). Best way to do it: .nav li:last-child { border-right: none; } If you need to maintain compatibility with older versions of IE, try writing your markup like this: <ul> <li><a href="#">Home</a></li> <li><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> <li class="last"><a href="#">Link3</a></li> </ul>
October 11, 201213 yr I wouldn't do what David suggested, because it adds very unsemantic class names (and too many of them too). Best way to do it: .nav li:last-child { border-right: none; } If you need to maintain compatibility with older versions of IE, try writing your markup like this: <ul> <li><a href="#">Home</a></li> <li><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> <li class="last"><a href="#">Link3</a></li> </ul> last-child is not cross browser solution .
October 11, 201213 yr last-child is not cross browser solution . last-child is supported by IE9 and all other browsers back several versions, and I gave an alternative for older versions of IE (giving the last child a class).
Create an account or sign in to comment