CSSの擬似クラス「root」
例えばタイトルに色を付けたりする場合、統一感を持たせるため同じ色を付けることはよくある。
その場合それぞれのセレクタ「プロパティ：値」をに付けなきゃならない。
CSSが複雑になると指定場所も見つかりにくくなる訳で、修正時なんか「忘れてた！」となるのが落ち。
そんな時はこのプロパティを使うと幸せになると言うお話。
CSS冒頭に書いとく
/* CSS例 */
:root {
--my-color: #ff0000;
--my-padding: 10px 20px;
}
/* この値を使いたいセレクタ例 */
h1 { color: var(--my-color); }
h2 { color: var(--my-color); }
p { padding: var(--my-padding); }
使い方はグローバル変数を設定するみたいに宣言し、「--」を頭に付けたプロパティを設定するだけ。
その値を使いたい部分で「var」のカッコ内にそのプロパティを入れれば反映される。>
実はすっかりこのセレクタを忘れていたため、ちょっと反省。
