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

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

質問:

特定のクラス属性が欠如している最後の子要素を選択することは可能ですか?たとえば、次の HTML について考えてみましょう。

<tr...></tr>
<tr...></tr>
<tr...></tr>
<tr>

このシナリオの目的は、3 行目を選択することです。

最初のアプローチ:

CSS セレクターを使用した最初の試みは、失敗:

tr:not(.table_vert_controls):last-child

回答:

:last-child は最後の子に対してのみ動作するため、純粋な CSS セレクターはこのタスクを実行できません。同等の :last-of-class 疑似クラスが不足しています。

代替ソリューション:

• セレクター 4 拡張機能:近い将来、:nth-child() および :nth-last-child() への拡張がサポートされるようになる可能性があります。これにより、任意のセレクターを引数として渡すことができます。これにより、次の構文が可能になります:

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

• 追加クラス: 問題のあるクラスの前に追加のクラスを含めます。
• jQuery セレクター: jQuery セレクターを使用しますのように:

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

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