web-dev-qa-db-ja.com

HTMLコードで何も変更せずに、CSSを使用して<ul>順序なしリストの最後の<li>リストアイテムの境界線を削除するにはどうすればよいですか？

最後のリストアイテムにクラスを追加せずに、CSSを使用して<ul>順不同リストの最後の<li>リストアイテムの境界線を削除するにはどうすればよいですか？

ここでライブの例を参照してください： 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>
htmlcssxhtml
14
Jitendra Vyas

このスタイルを追加すれば、他に何も変更する必要はありません。

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

編集：

元のスクリプト

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>
38
John K

私はCSS3やJavaScriptなしでこれを常に行っています。 liをフロートさせ、高度なセレクター+を使用するだけです。

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

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

これにより、最初のliに境界線ができなくなります。

10
Kevin

CSS3の使用

<li>の最後の<ul>を削除するには

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

私はCSSを使用してすべてを実行しますが、この場合、_:last-child_の使用はブラウザー間で互換性がありません（IEの問題のみが発生しました）。

JavaScriptを使用してスタイルを設定することを躊躇しませんが、CSSがすべてのブラウザーでトリックを実行できない場合に限ります。

これを行うには2つの方法があります。最初の方法は、_<li>_リスト内の最後のすべての_<ul>_にクラスを追加することをお勧めします。これはサーバー側で行うことができますが、私はサーバー側のコーディングの専門家ではないため、jQueryを使用すると、次の簡単なコードを記述できます。

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

これにより、クラスnoborderがul内の最後のすべてのアイテムに追加されます。 jQueryはJavaScriptCSSセレクターエンジンを使用するため、より複雑なセレクターを使用して、すべてのブラウザーで機能させることができます。興味があれば、スタンドアロンエンジンについて読む必要があります Sizzle 。

最後のすべてのアイテムにインラインスタイルを追加することもできますが、機能する場合は上記のコードを使用することをお勧めします。

$.css()を使用すると、アイテムに直接スタイルを追加できます。

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

同じセレクターを使用してアイテムを検索します。

JQueryの使用が気に入らない場合は、純粋なJavaScriptコードを記述して同じ効果を得ることができますが、なぜわざわざするのでしょうか。

2
Einar Ólafsson

first-childプロパティはCSS3に含まれているため、last-childを使用できます。

#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
anglimasS

私は次のようなjQueryを試してみます：

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

lastLiクラスでliの境界線の幅を0に設定する必要があります。

これがjQueryへのリンクですlast-childセレクターのドキュメント： http://docs.jquery.com/Selectors/lastChild

0
James Lawruk

このように使用します

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
Indranil