CSSで特定の要素の兄弟要素を拾う

初めに

リストの要素をクリックするとis-activeクラスが付与されるが、それ以外は変わらない。
その状態で「is-activeがない状態」「is-activeがある状態のis-active」「is-activeがある状態のis-active以外」の要素デザインを切り替えねばならなかった。

解決策

CSSで以下のようになった。

ul{
    li{
        background: #FFFFFF;
        &:has( ~ .is-active),
        &.is-active ~ li{
          background: #F6F6F6;
        }
        &.is-active{
          background: #CCCCFF;
        }
    }
}

hasセレクタで「以下に兄弟が.is-active」と、「.is-active移行の兄弟要素」を選択することで
.is-active以前と以降を両方変えることが出来た。

参考