Jitendra Vyas Jitendra Vyas - 17 days ago 7
HTML Question

How to remove <ul> unordered list's last <li> list item's border using css without changing anything in HTML code?

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

http://jsbin.com/umose

Answer

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>
Comments