コニファ・ロゴ

ツール集:CSSの変数を試してみる(3)(値の継承)

「CSSの変数を試してみる」のその(3)です。その(1)はこちらその(2)はこちらです。
CSS変数の値をJavaScriptのグローバル変数と同じように扱うためには、「:root」で定義します。ここで定義した値はbody全体に継承されます。また、同じ変数の値を局所的に変更することもできます。もちろんグローバルな値は変化しません。

サンプルは、「:root」で「--myColor: #26b」と定義し、span要素のcolorに適用、boxの子要素のspan要素(サンプルテキスト1)に反映しています。 さらに下の階層にもspan要素があり、それぞれの親要素で「--myColor」の値を再定義しています。そのためサンプルテキスト2、サンプルテキスト3の色が変わりますが、再定義した要素の外にあるサンプルテキスト4の色は変わりません。

サンプル

サンプルテキスト1(boxの子要素span)
サンプルテキスト2(box2の子要素span)
サンプルテキスト3(box3の子要素span)
サンプルテキスト4(boxの外側のspan)

htmlソース

<div class="wrap">
	<div class="box">
		<span>サンプルテキスト1(boxの子要素span)</span>
		<div class="box2">
			<span>サンプルテキスト2(box2の子要素span)</span>	
			<div class="box3">
				<span>サンプルテキスト3(box3の子要素span)</span>	
			</div>
		</div>
	</div>
	<span>サンプルテキスト4(boxの外側のspan)</span>	
</div>

CSSソース

:root {
	--myColor: #26b;
	}
.box,.box2,.box3 {
	background: #fff;
	border: 4px solid #ddd;
	padding: 10px;
	}
.box {
	width: 700px;
	margin: 10px auto;
	}
.box2  {
	width: 500px;
	margin: 10px 0 0 10px;
	--myColor: red;
	}
.box3  {
	width: 300px;
	margin: 10px 0 0 10px;
	--myColor: green;
	}
span {
	color: var(--myColor);
	}

 

 

 

 

戻るボタン