複数の要素の中で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変数を書くことができます。
-広告-
|
|