ホームページ > ウェブフロントエンド > CSSチュートリアル > CSS のみを使用して、特定のクラス名で最後の子要素をスタイル設定する方法

CSS のみを使用して、特定のクラス名で最後の子要素をスタイル設定する方法

Susan Sarandon
リリース: 2024-12-30 22:16:14
オリジナル
181 人が閲覧しました

How to Style the Last Child Element with a Specific Class Name Using Only CSS?

CSS で特定のクラス名を持つ最後の子を選択する

特定のクラス名を持つ最後の子要素をターゲットにする CSS ソリューションを探していますクラス名を指定する場合、子要素の数は変化する可能性があるため、この質問は困難を伴います。このため、nth-child() では不十分である可能性があるという懸念が生じます。 JavaScript もオプションとして除外されます。

解決策は、:last-of-type 疑似クラスと 属性セレクター にあります。

CSSコード:

[class~="list"]:last-of-type {
    background-color: #000;
}
ログイン後にコピー

説明:

  • [class~="list"]:クラス属性値の一部としてのクラス名「list」(つまり、必ずしも唯一のものである必要はありません) class).
  • :last-of-type: その型の最後の子である要素 (つまり、クラス "list" を持つ最後の li 要素) を選択します。 ").

これらのセレクターを組み合わせることで、ルールはクラス名を持つ最後の子要素に黒い背景を適用します。 「リスト」。他のクラスがあるかどうか、または子要素がいくつ存在するかは関係ありません。

例:

<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 属性]セレクター](http://css-tricks.com/attribute-selectors/)
  • [W3Schools 属性セレクター](http://www.w3schools.com/css/css_attribute_selectors.asp)

以上がCSS のみを使用して、特定のクラス名で最後の子要素をスタイル設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート