web-dev-qa-db-ja.com

最後の子セレクターを使用する

私の目標はCSSを最後のliに適用することですが、それはしません。

#refundReasonMenu #nav li:last-child {
    border-bottom: 1px solid #b5b5b5;
}
<div id="refundReasonMenu">
        <ul id="nav">
                <li><a id="abc" href="#">abcde</a></li>
                <li><a id="def" href="#">xyz</a></li>
        </ul>
    </div>

only最後の子を選択するにはどうすればよいですか？

csscss-selectors
106
Miral

:last-child擬似クラスは、ブラウザ間で確実に使用することはできません。特に、Internet Explorerバージョン<9、およびSafari <3.2 サポートしない 、ただしInternet Explorer 7およびSafari 3.2do:first-childをサポートしています。

最善の策は、そのアイテムにlast-child（または同様の）クラスを明示的に追加し、代わりにli.last-childを適用することです。

171
VoteyDisciple

あなたのために働くかもしれない別の解決策は、関係を逆にすることです。したがって、すべてのリストアイテムに境界線を設定します。次に、first-childを使用して、最初のアイテムの境界線を削除します。最初の子はすべてのブラウザーで静的にサポートされます（つまり、他のコードから動的に追加することはできませんが、最初の子はCSS2セレクターであり、最後の子はCSS3仕様で追加されました）

注：これは、例のようにリストに2つのアイテムしかない場合に、意図したとおりに機能します。 3番目以降のアイテムには境界線が適用されます。

76
Branden Silva

Javascriptを使用できると思われる場合は、jQueryがlast-childをサポートしているため、jQueryのcssメソッドを使用でき、ほぼすべてのブラウザーをサポートします。

サンプルコード：

$(function(){
   $("#nav li:last-child").css("border-bottom","1px solid #b5b5b5")
})

ここに関する詳細情報を見つけることができます： http://api.jquery.com/css/#css2

43
Tarik

リスト項目の数が固定されている場合、隣接するセレクターを使用できます。 <li>要素が3つしかない場合は、最後の<li>を選択できます：

#nav li+li+li {
    border-bottom: 1px solid #b5b5b5;
}
19
ccpizza

CSS3セレクターが頻繁に必要な場合は、サイトでselectivizrライブラリをいつでも使用できます。

http://selectivizr.com/

これは、そうでなければサポートしないブラウザーにほとんどすべてのCSS3セレクターのサポートを追加するJSスクリプトです。

IE条件付きで<head>タグにスローします：

<!--[if (gte IE 6)&(lte IE 8)]>
  <script src="/js/selectivizr-min.js" type="text/javascript"></script>
<![endif]-->
13
nzifnab

最後の子の擬似クラスはすなわちでは機能しません

CSS互換性とInternet Explorer

IE7 CSSセレクター：失敗する方法

3
rahul

もう1つの方法は、jQueryで最後の子セレクターを使用してから、.css（）メソッドを使用することです。ただし、JavaScriptが無効になっているブラウザを使用している一部の人々はまだ石器時代であるため、疲れています。

0
ecollis6

クラスを使用する代わりに、詳細リストを使用して、子dt要素に1つのスタイルを設定し、子dd要素に別のスタイルを設定することもできます。あなたの例は次のようになります：

#refundReasonMenu #nav li:dd
{
  border-bottom: 1px solid #b5b5b5;
}

html：

<div id="refundReasonMenu">
  <dl id="nav">
        <dt><a id="abc" href="#">abcde</a></dt>
        <dd><a id="def" href="#">xyz</a></dd>
  </dl>
</div>

どちらの方法も他の方法より優れているわけではなく、個人の好み次第です。

0
lexx

要素をフローティングにしている場合、順序を逆にすることができます

すなわちfloat: right;の代わりにfloat: left;

そして、このメソッドを使用して、クラスの最初の子を選択します。

/* 1: Apply style to ALL instances */
#header .some-class {
  padding-right: 0;
}
/* 2: Remove style from ALL instances except FIRST instance */
#header .some-class~.some-class {
  padding-right: 20px;
}

これは実際にクラスをLASTインスタンスに適用しているのは、現在の順序が逆になっているためです。

これが実際の例です：

<!doctype html>
<head><title>CSS Test</title>
<style type="text/css">
.some-class { margin: 0; padding: 0 20px; list-style-type: square; }
.lfloat { float: left; display: block; }
.rfloat { float: right; display: block; }
/* apply style to last instance only */
#header .some-class {
  border: 1px solid red;
  padding-right: 0;
}
#header .some-class~.some-class {
  border: 0;
  padding-right: 20px;
}
</style>
</head>
<body>
<div id="header">
  <img src="some_image" title="Logo" class="lfloat no-border"/>
  <ul class="some-class rfloat">
    <li>List 1-1</li>
    <li>List 1-2</li>
    <li>List 1-3</li>
  </ul>
  <ul class="some-class rfloat">
    <li>List 2-1</li>
    <li>List 2-2</li>
    <li>List 2-3</li>
  </ul>
  <ul class="some-class rfloat">
    <li>List 3-1</li>
    <li>List 3-2</li>
    <li>List 3-3</li>
  </ul>
  <img src="some_other_img" title="Icon" class="rfloat no-border"/>
</div>
</body>
</html>
0
Ozzy

ULの下部に境界線を適用しないのはなぜですか？

#refundReasonMenu #nav ul
{
    border-bottom: 1px solid #b5b5b5;
}
0
pork-chop