CSSで特定のクラスを持たずに最後の子を選択するにはどうすればよいですか?

CSS で :last-child と :not(.class) セレクターを組み合わせる

特定の子を持たない最後の子を選択するclass 属性は単純なタスクのように思えるかもしれませんが、CSS では課題が生じます。

問題:

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

<tr> ... </tr>
<tr> ... </tr>
<tr> ... </tr>
<tr class="table_vert_controls"> ... </tr>

目標は、「table_vert_controls」クラスのない最後の子である 3 行目を選択することです。ただし、次のセレクターは機能しません:

tr:not(.table_vert_controls):last-child

CSS セレクターの制限事項:

:last-child を含む CSS セレクターは、特に最後の子をターゲットとします。要素の。ただし、特定のクラスを持たない要素の最後の子を選択するための同等の疑似クラスはありません。

セレクターを使用した解決策 4:

後半2015 年の Selectors 4 では、任意のセレクターを引数として渡すことができる拡張機能が :last-child に導入されました。これにより、次のセレクタが有効になります:

tr:nth-last-child(1 of :not(.table_vert_controls))

ブラウザ サポート:

一部のブラウザではこの拡張機能の実装が開始されていますが、まだ広くサポートされていません。

代替ソリューション:

この拡張機能がより広くサポートされるまで、代替アプローチには以下が含まれます:

• 「table_vert_controls」クラスの前にクラスを追加する
• jQuery の使用: $(tr:not(.table_vert_controls):last)

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