Menu
How can I remove a <ul> unordered list's last <li> list item's border using CSS without adding any class to the last list item?
See live example here: http://jsbin.com/umose
body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; }
li
{
display: inline;
list-style-type: none;
padding:0 20px 0 20px;
border-right:1px solid green;
}
#navlist li:last-child { border-right: ; }<p id="hello"></p>
<ul id="navlist" >
<li ><a href="#" id="current">Item one</a></li>
<li id="active"><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>
281
Add this style and you don't need to modify anything else:
#navlist li:last-child { border-right:0px; }
Edit:
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>
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.
29
Using CSS3
To remove the last <li> in a <ul>
ul li:last-child {
border:none;
}
I would use CSS to do everything, but in this case using :last-child is not compatible between browsers (I have only encountered IE problems).
I don't hesitate to use JavaScript to help me style, but only where CSS can't do the trick on all browsers.
I see two ways to do this, the first recommend adding a class to every last <li> inside a <ul> list.
This can be done server side, but I'm not an expert on server side coding, so if you use jQuery you can write this simple code:
$("ul li:last-child").addClass("noborder");
This will add the class noborder to every last item inside a ul. jQuery uses a JavaScript CSS selector engine so that you can use more complex selectors and get them to work on all browsers. You should read about the stand alone engine Sizzle if you are interested.
You could also add an inline style to every last item, but I recommend using the code above if it works.
Using $.css() you can add style directly to the item;
$("ul li:last-child").css("border-right", "0");
It uses the same selector to find the items.
If you don't like using jQuery it is possible to write a pure JavaScript code to get the same effect, but why bother?
2
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
