CSS で特定のクラスを持たずに最後の子要素を選択できますか?

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

CSS で最後の子要素を選択できますか指定されたクラスがありませんか?たとえば、次の HTML 構造を考えてみます:

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

CSS セレクターを使用して 4 行目だけを選択するにはどうすればよいでしょうか?次のセレクターを使用しようとしても十分ではありません:

tr:not(.table_vert_controls):last-child

残念ながら、CSS セレクターのみを使用してこれを実現することは現実的ではありません。 :last-child 疑似クラスは、特に最後の子であり、比較可能な :last-of-class 擬似クラスはありません。

として2015 年の Selectors 4 では、:nth-child() および :nth-last-child() セレクターの拡張機能が導入され、任意のセレクターを引数として使用できるようになりました。これにより、次の構文が許可されます:

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

ただし、2018 年 4 月の時点では、Safari のみがこの機能をサポートしているため、互換性が広く普及するまでにはまだ数年かかります。

代替アプローチ:

それまでの間、代替手段を講じる必要があります。採用:

• 追加クラスの追加: ターゲット クラスの直前にクラスを追加し、その新しいクラスを持つ最後の子を選択します。
• jQuery セレクター: jQuery セレクターを使用します:

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

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