CSS / SCSS-除最后一个元素外的所有元素（无法正常工作）

Question

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

这听起来很怪异，但我需要它对应用程序进行这种工作。我尝试使用.red:not(last-child)，.red:not(last-of-type)等许多变体，但似乎无法正常工作。大概CSS被解释为整行中的最后一个元素，而不仅仅是具有'red'类的最后一个元素。

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

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

有什么想法可以实现这一目标吗？