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

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.

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?

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>

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

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>