css - 1 つのセレクターで最初と最後の td 要素を除くすべてを選択する

Question

私はCSSで次のようなものを書きました：

tr.red > td:not(:last-of-type):not(:first-of-type)
{
    color: #E53B2C;
    border-bottom: 4px solid #E53B2C;
}

.redこれを、クラスのある行の最初でも最後でもない表のセルに適用しようとしています。

期待通りに動作するように見えますが、これは本当に正しい方法ですか?

Answer 1

これが役立つかもしれません

tr.red  td:not(:first-child):not(:last-child)
{
//your styles
}

サンプル

Answer 2

W3C CSS Validatorを使用してすぐに確認できるため、構文的に正しいです。バリデーターにはエラーがあることが知られているため、原則として、CSS 仕様、特にセレクター レベル 3に対してルールを確認する必要があります。結果は、はい、正しいです。

これはセレクターが結合する方法であるため、望ましい意味もあります。セレクターを使用:not(...)して、「not ... and not ...」タイプの条件を表現できます。

trこれは、要素のすべての子が である場合に適用されますtd。ヘッダー セル、つまりth要素もある場合、セレクターはクラスtdの行の最初のデータ セルでも最後のデータ セルでもないデータ セル (要素) に適用されます。.red