web-dev-qa-db-ja.com

CSS ::リスト項目の最後の子

Ulに複数のクラスを持つliアイテムがある場合、：last-childを使用して特定のクラスの最後のアイテムを取得できますか？

たとえば、次のことを検討してください。

<ul class="test">
    <li class="one">
    <li class="one">
    <li class="one">
    <li class="two">
    <li class="two">
</ul>

クラス「1」を持つ最後のliにスタイルを追加したい（つまり、リストの3番目）。

以下を試してみましたがうまくいきません。

ul.test li.one:last-child
csshtml-listscss-selectors
12
user1355300

それは不可能です まだ 。

  • :last-child は、タグ名などに関係なく、最後の子を選択します。
  • 可能な代替案 :last-of-typeタグの最後の出現を選択します。クラス名などを無視します。

唯一のオプションは、特定のクラス名をその要素に追加するか、JavaScriptを使用してこのクラス名を追加することです。

19
Rob W

各李のためのクラスを与える代わりに、あなたは李番号によってスタイルを割り当てることができるn番目の子供のために行くことができます。

あなたがあなたの3番目の李のために別々のCSSを与えたいなら、あなたは書く必要があります

li:nth-child(3) {
    color: green;   
}
4
Sowmya

Jqueryを使用してそれを行うことができます： http://jsfiddle.net/surendraVsingh/HyAhL/2/

jqueryコード：

var n = $('.one').length;
$('.one').eq(n-1).css('color', 'red');
1
SVS