Как удалить <ul> неупорядоченный список последней <li> границы элемента списка с помощью CSS без изменения чего-либо в HTML-коде?

Как я могу удалить <ul> неупорядоченный список последних <li> с помощью CSS без добавления какого-либо класса в последний элемент списка?

Смотрите здесь пример живого: 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>

Ответы

Ответ 1

Добавьте этот стиль, и вам не нужно ничего изменять:

#navlist li:last-child { border-right:0px; }

Edit:

Оригинал Script

Оригинал script, к которому применяется ответ, отправлен здесь, потому что jsbin.com может удалить контент, не просмотренный в течение 3 месяцев.

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

Ответ 2

Я делаю это все время без CSS3 или JavaScript. Все, что вам нужно сделать, это поместить ваш li и использовать расширенный селектор +:

<style>
ul li {
 float: left;
 border: none; }

li + li {
 border-left: 1px solid #F00; } 
</style>

Это приведет к тому, что первая li будет иметь границу.

Ответ 3

Использование CSS3

Чтобы удалить последний <li> в <ul>

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

Ответ 4

Я бы использовал CSS, чтобы делать все, но в этом случае использование :last-child несовместимо между браузерами (я столкнулся только с проблемами IE).

Я не стесняюсь использовать JavaScript, чтобы помочь мне стиль, но только там, где CSS не может сделать трюк во всех браузерах.

Я вижу два способа сделать это, сначала рекомендую добавить класс к каждому последнему <li> внутри списка <ul>. Это может быть сделано на стороне сервера, но я не специалист по кодированию на стороне сервера, поэтому, если вы используете jQuery, вы можете написать этот простой код:

$("ul li:last-child").addClass("noborder");

Это добавит класс noborder к каждому последнему элементу внутри ul. jQuery использует механизм выбора CSS CSS, чтобы вы могли использовать более сложные селектора и заставить их работать во всех браузерах. Вы должны прочитать об автономном двигателе Sizzle, если вы заинтересованы.

Вы также можете добавить встроенный стиль для каждого последнего элемента, но я рекомендую использовать приведенный выше код, если он работает.

Используя $.css(), вы можете добавить стиль непосредственно к элементу;

$("ul li:last-child").css("border-right", "0");

Он использует тот же селектор, чтобы найти элементы.

Если вам не нравится использование jQuery, можно написать чистый код JavaScript, чтобы получить тот же эффект, но зачем беспокоиться?

Ответ 5

Вы можете использовать first-child, потому что свойство last-child находится в CSS3.

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

Проверьте ссылку: http://www.quirksmode.org/css/contents.html

Теперь проверьте код ниже:

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>

Ответ 6

Я бы попробовал jQuery, что-то вроде этого:

$("#myDiv ul li:last-child").addClass("lastLi");

Вам нужно, чтобы класс lastLi установил ширину рамки li равным 0.

Вот ссылка на документацию селектора jQuery last-child: http://docs.jquery.com/Selectors/lastChild

Ответ 7

Используйте это как

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

Примечание

Поместите номер позиции li (например, 3 или 4 или 5) внутри (); также манипулировать границей влево или вправо.

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>