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

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

CSS では、多くの場合、複数の基準に基づいて特定の要素を選択する必要があります。そのようなケースの 1 つは、特定のクラスを持たない最後の子を選択することです。単純そうに見えるかもしれませんが、:last-child セレクターと :not(.class) セレクターのみを使用しても、望ましい結果は得られません。

:last-child と :not(.class) を使用する

:last-child セレクターは要素の最後の子をターゲットにし、:not(.class) は指定されたクラスを持たない要素を選択します。ただし、これらのセレクターを直接組み合わせて目的の効果を実現することはできません。

次の例を考えてみましょう:

<tr>
<p>目的は、「table_vert_controls」を持たない 3 行目を選択することです。 " クラス。次の CSS ルールは機能しません:</p>
<pre class="brush:php;toolbar:false">tr:not(.table_vert_controls):last-child

このルールは、「table_vert_controls」クラスがあるかどうかに関係なく、最後の行を選択します。

代替ソリューション

CSS セレクターだけではこの特定の組み合わせを処理できないため、代替ソリューションが必要です。

• 追加クラスの使用: 目的のクラスの前の要素に追加クラスを追加します。 「last-child-no-class」など。次に、次のルールを使用します:

.last-child-no-class:not(.table_vert_controls)

• jQuery セレクター: jQuery のより強力なセレクター エンジンを利用して、目的の要素を選択します:

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

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