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

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

CSS では、:last-child セレクターが使用されます要素のリスト内の最後の要素を選択します。ただし、このセレクターを使用して、特定のクラス属性を持たない最後の子を選択することはできません。

これを実現するには、次のセレクターの使用を試みることができます:

tr:not(.table_vert_controls):last-child

残念ながら、:last-child はリスト内の最後の要素をターゲットにしており、同等の :last-of-class 疑似クラスがないため、このセレクターは機能しません。

2015 年後半現在、セレクター 4 :nth-child() および :nth-last-child() セレクターに拡張機能が導入され、より複雑な選択が可能になりました。この拡張機能には、任意のセレクターを引数として渡す機能が含まれています。

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

このアプローチはより冗長ですが、目的の要素を選択するためのより正確かつ効率的な方法を提供します。ただし、セレクター 4 のサポートはまだ制限されていることに注意することが重要です。

セレクター 4 をサポートしていないブラウザーの場合は、別のアプローチとして JavaScript セレクターを使用します。

$('tr:not(.table_vert_controls):last')

この jQuery セレクターは、Selectors 4 セレクターと同じ結果を実現します。 JavaScript を使用すると、純粋な CSS ソリューションと比較してパフォーマンスへの影響が生じる可能性があることに注意してください。

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