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

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

CSS を使用する場合、位置とクラスに基づいて特定の要素を選択することが重要になる場合があります。名前。この質問では、特定のクラス名を持つ「最後の子」要素をターゲットにする方法を検討します。

問題:

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

<ul>
    <li>

目標は、クラス名「list」を持つ最後の子を選択し、特定のスタイルを適用することです。

提案された解決策 (機能しない):

ul li.list:last-child{background-color:#000;}

欠点:

提案された解決策CSS は次の要素の :last-child セレクターをサポートしていないため、これは正しくありません。

解決策:

この問題は属性セレクターを使用して解決できます:

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

説明:

• [class~=list]: この属性セレクターは、クラス名「list」または次の内容を含む他のクラス名を持つ要素と一致します。文字列 "list."
• :last-of-type: この擬似クラスは、特定の型の最後の要素、この場合は li 要素を選択します。

利点:

• 「リスト」クラスがリストの最後のクラスでない場合でも機能します。
• ターゲット要素の正確な位置を知る必要はありません。

重要な注意事項:

• ul li:nth の使用は避けてください。 -child(3) 子の数は変化する可能性があります。
• これには JavaScript が使用できません。解決策。

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