css - CSS/SCSS - 除了最后一个元素之外的所有元素（未按预期工作）

Question

我正在构建一个应用程序，该应用程序由一系列带有网格方块的行组成，并且我正在使用 JavaScript 从左到右逐渐将一个类附加到网格方块。该类为网格正方形提供了红色背景，但我希望每行中带有“红色”类的最后一个元素实际上没有红色背景，无论它是否是最后一个网格正方形。

这听起来可能很奇怪，但我需要它以这种方式为应用程序工作。我试过使用很多变体.red:not(last-child)，.red:not(last-of-type)等等，但我似乎无法让它工作。大概 CSS 被解释为整行中的最后一个元素，而不仅仅是具有“红色”类的最后一个元素。

我设置了一个 codepen 来尝试演示我在说什么：https ://codepen.io/ash-thomas/pen/vwBNdE

这也可能有助于解释我所追求的：

任何想法我可以如何实现这一目标？

标签： csssasscss-selectorspseudo-class