javascript - すべての行/行の最後のすべての要素を異なる方法でスタイルするにはどうすればよいですか?

Question

を使用してグリッドを作成しようとしています

display:inline=block

すべての行/行の最後の要素をすべて異なるスタイルにする必要があります。私は試した

nth-child
nth-of-type

ただし、それを使用すると、他のグリッドと混同されます。では、新しいクラスを追加せずにどうすればよいでしょうか?

Answer 1

私があなたのコードから見た限り、nth-child を使用して目標を達成することはできません。例を挙げて説明します: セクション class="four" の 4 番目と 8 番目の子を赤くしたいとします。nth-child または nth-of-type を使用するには、親、つまり本体から始まる子を参照する必要があります。そのため、body の子のリストで、セクション class="four" の 4 番目と 8 番目の子が何番目かを特定するのは難しく、まったく柔軟ではありません。section.four:last-child のような間違った方法で使用していると思いますが、これは正しくありません。確認してください: w3schools リンク

さらに、nth-child と nth-of-type はセレクターでは使用できず、要素でのみ使用できるため、.four:nth-child のようなことはできません (class="four" で div を作成する場合)。セクション外)。

したがって、クラスを追加しない唯一の方法は、次のような jquery です。

$('.four').last().css('background-color', 'red');