CSS

CSS変数を継承してみよう

複数の要素の中でCSS変数を使う方法についてみていきます。

  • CSS変数の継承
  • :root

CSS変数の継承

・ CSS 変数もしh1 の中で宣言したら、その中でしか使えません。したがってp 要素に対して、同じように --my-color を使いたかったとしてもうまくいかないのです。

・—my-color を複数の要素でも使いたかった場合、 CSS 変数は継承されるプロパティになるので、共通の親要素で指定してあげれば OK です。

:root

・bodyの中で指定していく方法もありますがさらに親要素である html要素の方に書いていくほうが一般的です。今回はhtmlを示す :root 擬似クラスも使われますのでここに書いていきましょう。

・セレクターを:rootにしてそこにCSS変数を入れてあげます。:root{—my-color: blue;}としていけば全体に適応するCSS変数を書くことができます。

-広告-

 

 






-CSS