display:none の打ち消し

特定のクラスだけdisplay:noneを打ち消したい時

画像のようにchart-container expandedクラスは表示させたいが、それ以外のclassは非表示にしたい。

ポイント

display: flex など指定したら負けるので表示されてしまう
display:none に important をつけたスタイルを自分で設定しておけば大丈夫

.chart-container .ringTotals{
        display:none;
    }
    .chart-container.expanded .ringTotals{
        display:flex!important;
    }

これでdisplay:none;を打ち消すことができる