CODEWITHSUNDEEP
htmlcssxhtml
Jitendra Vyas
Jitendra Vyas

Reputation: 152727

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

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>

Upvotes: 14

Views: 51801

Answers (7)

Einar &#211;lafsson
Einar &#211;lafsson

Reputation: 3177

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?

Upvotes: 2

Indranil
Indranil

Reputation: 165

Use like this 

li:nth-child(){ border-left:none;}

Note

Put the li position number (like 3 or 4 or 5) inside (); also manipulate border left or right.

div p { display:inline-block; background:darksalmon; padding:4px;
        border-left:13px solid silver; }
div p:first-of-type { color:#fff; border-left:13px solid magenta; }

li { border-right:2px solid blue; 
     display:inline-block;padding:7px; background:skyblue;color:#fff;
}
ul li:nth-last-of-type(2) + li {
    background:hsla(80,100%,60%,0.16);
    border-right:none;
    color:#000000;
} 
<h1>both universal solid style for 
   <i style='color:#1AB9FC'>Left or Right</i> border remove
</h1>
<div>
  <h3 style="color:olive; text-align:center;">Target rightborder</h3>
  <p>The first paragraph.</p>
  <p>The second paragraph.</p>
  <p>The third paragraph.</p>
  <p>The fourth paragraph.</p>
</div>
<br>
<ul>
  <li>li-1</li>
  <li>li-2</li>
  <li>li-3</li>
  <li>li-4</li>
  <li>li-5</li>
  <li>li-6</li>
</ul>
<h3>Remove left border</h3>
<p><b>Note: </b><span>Last <code>li</code> always selected if you increase the <code>li</code> items in future</span></p>

Upvotes: 0

anglimasS
anglimasS

Reputation: 1344

You can use first-child because the last-child property comes in CSS3.

#navlist li:first-child { border-left:0; }

Check below the link: http://www.quirksmode.org/css/contents.html

Now check below the code:

body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; }
#navlist li
{
    display: inline;
    list-style-type: none;
    padding:0 20px 0 20px;border-left:1px solid red
}
#navlist li:first-child{border-left:none}
<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>

Upvotes: 1

James Lawruk
James Lawruk

Reputation: 31355

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

Upvotes: 0

Kevin
Kevin

Reputation: 26524

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.

Upvotes: 10

John K
John K

Reputation: 28869

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>

Upvotes: 38

Gerard Banasig
Gerard Banasig

Reputation: 41

Using CSS3

To remove the last <li> in a <ul>

ul li:last-child { 
    border:none; 
  }

Upvotes: 3

Related Questions