How to remove <ul> unordered list's last <li> list item's border using css without adding any class to last list item?
see live example here
views:
730answers:
4
A:
I would try Jquery, something like this:
$("#myDiv ul li:last-child").addClass("lastLi");
You would need to make the lastLi class set the li border width to 0.
Here is a link to the JQuery last-child selector documentation:http://docs.jquery.com/Selectors/lastChild
James Lawruk
2010-01-05 03:56:37
i wanted to know is there any pure css way
metal-gear-solid
2010-01-05 03:58:28
+1
A:
Using CSS3
To remove the last <li> in a <ul>
ul li:last-child {
border:none;
}
Gerard Banasig
2010-01-05 04:00:05
+7
A:
Add this style and you don't need to modify anything else:
#navlist li:last-child { border-right:0px; }
Edit:
Original Script
Original script to which the answer applies is posted here because jsbin.com may delete content not viewed for 3 months.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Sandbox</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; }
#navlist li
{
display: inline;
list-style-type: none;
padding:0 20px 0 20px;border-right:1px solid red;
}
/* !!!!!!!!!!!!!! PASTE ANSWER HERE TO MAKE THE FIX !!!!!!!!!!!!!!!! */
</style>
</head>
<body>
<p>Hello from JS Bin</p>
<p id="hello"></p>
<ul id="navlist">
<li id="active"><a href="#" id="current">Item one</a></li>
<li><a href="#">Item two</a></li>
<li><a href="#">Item three</a></li>
<li><a href="#">Item four</a></li>
<li><a href="#">Item five</a></li>
</ul>
</body>
</html>
John K
2010-01-05 04:02:38
There may be compatibility problems, see http://www.quirksmode.org/css/contents.html
pavium
2010-01-05 04:12:16
Ouch, IE6 ... if it doesn't support the same level of CSS standards, you might have to switch to a different solution like adding a class to the last list item even though you didn't want to do that. Does anybody else have an IE6 solution that's in line with the original question?
John K
2010-01-05 04:35:53
Why not use this answer to formulate a brand new SO question based on IE6 and CSS (put IE6 in the title of the new question) - you will get more specific answers and it shouldn't be considered a duplicate.
John K
2010-01-05 06:13:43
+2
A:
i do this all the time without css3 or javascript. All you need to do is float your li and use an advanced selector +
<style>
ul li {
float: left;
border: none; }
li + li {
border-left: 1px solid #F00; }
</style>
this will keep the first li from having a border
Thorn007
2010-01-06 19:33:22