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

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

CSS スタイルの領域では、多くの場合、要素を操作する必要があります。親コンテナ内の位置に基づいて。課題は、特定のクラス名を持つ要素の「最後の子」をターゲットにする必要があるときに発生します。

次の HTML 構造を考えてみましょう:

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

目的はスタイルを適用することです。最後まで

クラス名「list」を持つ要素。最初に提案されたセレクター ul li.list:last-child は機能しませんが、別の解決策があります。

属性セレクターを救済

CSS 属性セレクター特定の属性に基づいて要素をターゲットにできるようになります。この場合、[class~='list'] セレクターを使用して、クラス「list」を持つ要素をターゲットにすることができます。 「~=」演算子は、指定されたクラスを持つ要素を単語全体として照合します。これにより、クラスの命名規則が柔軟になり、複数のクラスが確実に考慮されるようになります。

最後に、:last-of-type 擬似クラスは、前のセレクターに一致するその型の最後の子を選択します。これらの手法を組み合わせると、次の動作セレクターが生成されます。

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

このセレクターは、最後の

と一致します。クラス「list」を持つ要素を作成し、黒の背景色を適用します。

属性セレクターの詳細:

• [CSS トリックの属性セレクター]( http://css-tricks.com/attribute-selectors/)
• [CSS W3Schools の属性セレクター](http://www.w3schools.com/css/css_attribute_selectors.asp)

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