CSS で特定のクラス名を持つ最後の子を選択する
特定のクラス名を持つ最後の子要素をターゲットにする CSS ソリューションを探していますクラス名を指定する場合、子要素の数は変化する可能性があるため、この質問は困難を伴います。このため、nth-child() では不十分である可能性があるという懸念が生じます。 JavaScript もオプションとして除外されます。
解決策は、:last-of-type 疑似クラスと 属性セレクター にあります。
CSSコード:
[class~="list"]:last-of-type { background-color: #000; }
説明:
これらのセレクターを組み合わせることで、ルールはクラス名を持つ最後の子要素に黒い背景を適用します。 「リスト」。他のクラスがあるかどうか、または子要素がいくつ存在するかは関係ありません。
例:
<ul> <li class="list">test1</li> <li class="list">test2</li> <li class="list extra-class">test3</li> </ul>
この例では、3 番目の要素が存在するとしても、子に追加のクラスがあっても、それがそのクラス名を持つ最後の子であるため、CSS ルールはそれに黒の背景を適用します。 "list."
属性セレクター:
属性セレクターを使用すると、クラス名を含む属性に基づいて要素をターゲットにすることができます。 class~ セレクターを使用すると、指定した単語を含むクラス名を持つ要素を選択できます (たとえば、「list-item-1」、「list-item-2」、「list-item-2」などの名前のクラスが複数ある場合)。など).
リソース:
以上がCSS のみを使用して、特定のクラス名で最後の子要素をスタイル設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。