web-dev-qa-db-ja.com

CSSで特定のクラス名を持つ「最後の子」を選択するにはどうすればよいですか？

<ul>
    <li class="list">test1</li>
    <li class="list">test2</li>
    <li class="list">test3</li>
    <li>test4</li>
</ul>

クラス名listで「最後の子」を選択するにはどうすればよいですか？

<style>
    ul li.list:last-child{background-color:#000;}
</style>

上記の例が機能しないことは知っていますが、これに似た機能はありますか？

重要：

a）ul li:nth-child(3)を使用することはできません。4位または5位でもある可能性があるためです。

b）JavaScriptなし。

どんな助けでも感謝します、ありがとう！

csscss3css-selectors
93
user317005

次のような要素に複数のクラスを割り当てることができるという事実を活用することをお勧めします。

<ul>
    <li class="list">test1</li>
    <li class="list">test2</li>
    <li class="list last">test3</li>
    <li>test4</li>
</ul>

最後の要素には、その兄弟と同様にlistクラスがありますが、必要なCSSプロパティを設定するために使用できるlastクラスもあります。

ul li.list {
    color: #FF0000;
}

ul li.list.last {
    background-color: #000;
}
3
Ibu

これは、属性セレクターを使用して実行できます。

[class~='list']:last-of-type  {
    background: #000;
}

class~は、特定のWord全体を選択します。これにより、リストアイテムは、必要に応じて、さまざまな順序で複数のクラスを持つことができます。正確なクラスの「リスト」を見つけ、最後のスタイルにスタイルを適用します。

こちらの実際の例をご覧ください： http://codepen.io/chasebank/pen/ZYyeab

属性セレクターの詳細をご覧ください。

http://css-tricks.com/attribute-selectors/http://www.w3schools.com/css/css_attribute_selectors.asp

57
Chase

隣接する兄弟セレクターを使用して、同様のことを実現できます。

.list-item.other-class + .list-item:not(.other-class)

クラスother-classを持つ最後の要素の直後にある次の要素を効果的にターゲットにします。

詳細はこちら： https://css-tricks.com/almanac/selectors/a/adjacent-sibling/

21
Kenneth Lynne

これは生意気な答えですが、CSSのみに制約されており、DOMでアイテムを反転できる場合は、検討する価値があるかもしれません。特定のクラスのlast要素にはセレクターがありませんが、実際にはfirstのスタイル設定が可能であるという事実に依存しています。トリックは、flexboxを使用して要素を逆順に表示することです。

ul {
  display: flex;
  flex-direction: column-reverse;
}

/* Apply desired style to all matching elements. */
ul > li.list {
  background-color: #888;
}

/* Using a more specific selector, "unstyle" elements which are not the first. */
ul > li.list ~ li.list {
  background-color: inherit;
}
<ul>
  <li class="list">0</li>
  <li>1</li>
  <li class="list">2</li>
</ul>
<ul>
  <li>0</li>
  <li class="list">1</li>
  <li class="list">2</li>
  <li>3</li>
</ul>
21
joki

最も正しい答えは、:nth-child（または、この特定の場合、対応する:nth-last-child）を使用することだと思います。ほとんどの場合、nを使用した計算に基づいてアイテムの範囲を取得するための最初の引数でこのセレクターのみを知っていますが、「[CSSセレクター]の」2番目の引数を取ることもできます。

このセレクターでシナリオを解決できます：li:nth-last-child(1 of .list)

しかし、このセレクタは現在のところSafariでのみ実装されているため、技術的に正しいとは限りません。

さらに読むには：

6
hurrtz

リスト内のクラス名の最後のインスタンスをJSなしでターゲットにすることはできません。

ただし、達成したい内容によっては、完全に不運なわけではありません。たとえば、次の兄弟セレクターを使用することで、最後の.list要素の後に視覚的な仕切りを追加しました： http://jsbin.com/vejixisudo/edit?html,css,output

2
Reggie Pinkham

このセレクターを使用してください：ul > li:last-of-type。これにより、順序付けられていないリスト（<li>）の最後のリスト項目（<ul>）がすべて選択されます。

答えの内訳：親要素（>）からそのタイプ（<ul>）の最後の子である順序なしリスト（<li>）の子（<ul>）のみを選択しています。

Idまたはクラスを使用して、セレクターを特定の順序付けられていないリストに制限できます。例：ul.my-class > li:last-of-typeは、そのクラスの番号なしリストからのみ最後の<li>を選択します

1
flen

この問題には（特定の状況で）回避策があります。

これは質問に直接答えませんが、この考え方が同じ目標を達成する可能性が高いです。

インデックス3よりも低いリスト内のすべての要素を非表示にしたとしましょう

<ul>
    <li>test1</li>
    <li>test2</li>
    <li class="hide">test3</li>
    <li>test4</li>
    <li>test5</li>
</ul>

CSS

li{ display:none; }
li.hide ~ li{ display:block; }

ライブデモ

これにより、hideクラスを非表示にする必要のあるすべての要素に追加する必要がなくなるため、すべてを支配するhideクラスのみが残ります。現在、クラス名で動作できないlast-of-typeを使用する必要はありません。物事を分類するアプローチを再考する必要があります

0
vsync