如何用SCSS选择父元素为最后子元素的.custom-class？

现有如下HTML结构：

<div>
    <div>
       <div class="custom-class">whatever</div>
   </div>
    <div>
       <div class="custom-class">whatever</div>
   </div>
   <div>
       <div class="custom-class">thing i want to select</div>
   </div>
</div>

当前已为所有.custom-class设置红色文字样式，需求是：仅给父元素为祖父元素最后一个子元素的.custom-class添加绿色文字样式，且样式代码需写在统一的.custom-class SCSS规则内，父元素与祖父元素均无自定义类。

可以利用CSS的:last-child伪类结合SCSS的嵌套特性实现，具体写法如下：

.custom-class {
    color: red;

    // 选中父元素为最后一个子元素的.custom-class
    :last-child > & {
        color: green;
    }
}

选择器说明 #

• & 在SCSS中代表当前的选择器（即.custom-class）
• :last-child > & 表示匹配所有作为最后一个子元素的元素的直接子元素的.custom-class，精准命中目标元素，不会影响其他同类元素。

如果需要严格限定父元素为div标签，可将选择器改为：

div:last-child > & {
    color: green;
}

编译后的CSS代码如下，效果完全符合需求：

.custom-class {
    color: red;
}
:last-child > .custom-class {
    color: green;
}

内容的提问来源于stack exchange，提问作者Yehuda