特定の要素の子要素でテキストカラーを変えたい！カスタムプロパティを上書きしたのに変わらなかった話

この要素は暗めの背景色を使ってるから子要素ではテキストカラーを変えたい白にしたいなーってことありますよね。あったんです。

そのプロジェクトではテキストカラーは CSS Custom Properties で指定していたのでこれを上書きするだけかなーと思っていたのですがうまく変わってくれませんでした。

解決方法

child3 のように color を再び指定してあげれば色が変わります。
どうやら親要素から引き継いだ CSS 内のカスタムプロパティでは親要素で評価された結果を使うみたいですね。

おわりに

仕事では VueJS + Vuetify のような高級品を使うのでたまに生の CSS を使うとハマってしまいますね。
思い込みで動くはずだと決めつけていたので原因がわかるまで苦労しました…。Codepen などで小さく切り出すことで解決方法がわかりました。切り分けの腕を上げていきたいです。