☰

CSS で特定のクラス名を持つ「最後の子」を選択するにはどうすればよいですか? [重複] 質問する

tag-icon • tag-icon css css-selectors
CSS で特定のクラス名を持つ「最後の子」を選択するにはどうすればよいですか? [重複] 質問する 
<ul>
    <li class="list">test1</li>
    <li class="list">test2</li>
    <li class="list">test3</li>
    <li>test4</li>
</ul>

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

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

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

重要：

ul li:nth-child(3)a)は 4 番目や 5 番目の場所にくる可能性もあるため、使用できません。

b) JavaScript なし。

ベストアンサー1

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

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

特定の単語全体をclass~選択します。これにより、リスト項目に、必要に応じてさまざまな順序で複数のクラスを設定できます。正確なクラス「リスト」が検索され、最後のクラスにスタイルが適用されます。

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

属性セレクターの詳細については、以下を参照してください。

http://css-tricks.com/属性セレクター/ http://www.w3schools.com/css/css_attribute_selectors.asp

おすすめ記事