CSS で特定のクラスを持つ最後の子要素を選択する方法は?

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

CSS で、特定のクラスを持つ親要素の最後の子要素をターゲットにするname は属性セレクターを使用して取得できます。次の HTML マークアップを考えてみましょう:

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

クラス名「list」を持つ最後の子要素を選択するには、次の CSS を使用できます:

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

CSSセレクター:

• [class~='list'] は、クラス名「list」を持つ任意の要素と一致します。クラス名は、最初、2 番目、最後のクラスのいずれであっても、要素の class 属性内のどこにでも配置できます。
• :last-of-type は、一致する最後の子要素を選択します。前のセレクター。これにより、クラス名「list」を持つ最後の子要素のみがターゲットになります。

属性セレクターを使用する利点:

CSS 疑似クラスとは異なります。 :nth-child() と同様、属性セレクターは次の機能を提供します。利点:

• 親要素内の位置に関係なく要素を選択できます。
• 複数のクラスを持つ要素をターゲットにできます。

追加リソース:

• [W3Schools: :last-of-typeセレクター](https://www.w3schools.com/cssref/sel_lastoftype.asp)
• [CSS トリック: 属性セレクターについて](https://css-tricks.com/attribute-selectors/)

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