Как удалить границу последнего элемента списка неупорядоченного списка с помощью 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>
14
css html xhtml

7 ответов

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

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

Edit:

Оригинальный Сценарий

оригинальный скрипт, к которому применяется ответ, размещен здесь, потому что 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>
37

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

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

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

это сохранит первый li от границы.

10

С помощью CSS3

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

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

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

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

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

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

это добавит класс noborder на каждый элемент внутри ul. jQuery использует механизм селектора CSS JavaScript, чтобы вы могли использовать более сложные селекторы и заставить их работать во всех браузерах. Вы должны прочитать о stand alone engine шипеть если вы заинтересованы.

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

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

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

он использует тот же селектор для поиска элементов.

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

2

можно использовать 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>
1

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

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

вам нужно будет сделать lastLi класса в li ширина границы до 0.

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

0

использовать такой 

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