クラスの内で定義したCSS変数はどこまで効く？親子関係を含め詳しく解説

CSSを書いていると、次のようにクラスの内でCSS変数を定義することがあります。

.point {
  --point-color: #f28c00;
}

このような書き方はとても便利ですが、初心者のうちは「このCSS変数はどこまで効くの？」「同じようなクラス名なら使えるの？」と迷いやすいです。

実際、見た目は合っていても、仕組みをなんとなくで使っていると、後から修正するときに混乱しやすくなります。

この記事では、クラスの内で定義したCSS変数がどこまで効くのかを、親子関係も含めてわかりやすく解説します。あわせて、初心者が勘違いしやすいポイントも整理していきます。

CSS変数とは？

まず、CSS変数はCSSの中で使い回せる値のことです。次のように、–で始まる名前で定義します。

.point {
  --point-color: #f28c00;
}

そして、使うときはvar()を使います。

.point__title {
  color: var(--point-color);
}

つまり、

• –point-color: #f28c00;で値を用意する
• var(–point-color)でその値を呼び出す

という流れです。

JavaScriptの変数とまったく同じではありませんが、初心者の方はまず「名前をつけて使い回せる値」と考えるとわかりやすいです。

 

なぜ–が付いているのか

–point-colorのように、先頭に–が付いているのはCSSのルールです。

CSS変数は正式にはカスタムプロパティと呼ばれます。このカスタムプロパティは、必ず–で始める必要があります。

たとえば、これは正しい書き方です。

--point-color: #f28c00;

一方で、これはCSS変数としては扱われません。

point-color: #f28c00;

見た目は少ししか違いませんが、意味はかなり違います。–が付いているからこそ、「これはCSS変数ですよ」とブラウザに伝わります。

 

クラスの内で定義したCSS変数をその場所に書く理由

たとえば、次のようなコードがあったとします。

.point {
  --point-color: #f28c00;
  --point-bg-image: url("images/point01.svg");
}

これは、.pointというパーツの中で共通して使いたい値を、親側にまとめて置いているという考え方です。

たとえば同じ.pointの中で、

• 見出しの強調色
• 波線の色
• ボタンの枠線の色
• ボタンの丸い矢印の背景色

を同じ色にしたいことがあります。

そのときに、毎回#f28c00と書くよりも、親で1回だけ定義して、子側で使った方がかなり管理しやすいです。

.point__title {
  color: var(--point-color);
}

.point__line {
  color: var(--point-color);
}

.point__button {
  border-color: var(--point-color);
  color: var(--point-color);
}

こうしておけば、色を変えたいときは–point-colorだけ直せば済みます。見た目の統一もしやすく、修正も楽です。

 

クラスの内で定義したCSS変数はどこまで効くのか

ここがいちばん大事です。

クラスの内で定義したCSS変数は、そのクラスの中にある子要素や子孫要素で使えます。

たとえば、次のHTMLを見てください。

<div class="point">
  <h2 class="point__title">見出し</h2>
</div>

この場合、h2.point__titleは.pointの中にあります。なので、.pointで定義したCSS変数を使えます。

.point {
  --point-color: #f28c00;
}

.point__title {
  color: var(--point-color);
}

このとき、見出しはオレンジになります。

 

外に出た要素では使えない

では、次のようなHTMLならどうでしょうか。

<div class="point">
  <div>test</div>
</div>

<h2 class="point__title">見出し</h2>

この場合、h2.point__titleは.pointの外にあります。クラス名は似ていますが、HTMLの構造上は別の場所です。

そのため、.pointで定義したCSS変数は届きません。

.point {
  --point-color: #f28c00;
}

.point__title {
  color: var(--point-color);
}

このvar(–point-color)は、値が見つからないので無効になります。

ここで大事なのは、同じようなクラス名かどうかではなく、HTMLの中に入っているかどうかです。

 

__でつながっていると子要素扱いになるのか

これはかなりよくある勘違いです。

結論からいうと、なりません。

たとえば、.point__titleというクラス名は、CSSから見るとただのクラス名です。__に特別な意味はありません。

これはBEMっぽい命名ルールで、人間が見たときに「pointという部品の中のtitleなんだな」とわかりやすくするための名前です。

つまり、

• __があるから子要素になる
• HTMLの入れ子構造がそうなっているから子要素になる

という違いがあります。

ここを混同すると、クラスの中で定義したCSS変数の効く範囲も分かりにくくなります。

 

子要素と子孫要素の違い

次のHTMLを見てみます。

<div class="point">
  <h2 class="point__title">見出し</h2>
</div>

この場合、h2は.pointの子要素です。しかも、直下の子要素です。

一方で、次のように間に別の要素が入ると、

<div class="point">
  <div>
    <h2 class="point__title">見出し</h2>
  </div>
</div>

このh2は、.pointの子孫要素です。中にはいますが、直下ではありません。

この違いはCSSセレクタにも関係します。

.point .point__title

これは、.pointの中にある.point__titleすべてに効きます。

.point > .point__title

これは、.pointの直下にある.point__titleにしか効きません。

初心者の方は、この2つを一緒に考えがちですが、意味はけっこう違います。

 

クラスの中で定義したCSS変数が効かないときの原因

「クラスの中で定義したCSS変数を書いたのに効かない」というときは、だいたい次のどれかです。

• HTML上で、その要素が親の中に入っていない
• 変数名のスペルが違う
• 変数が未定義のまま使われている
• 別のCSSで上書きされている

初心者のうちは、「変数が壊れている」のではなく、「HTML構造が原因だった」というケースがとても多いです。

 

fallbackを書いておくと安心

CSS変数が見つからないときに備えて、予備の値を書いておくこともできます。

.point__title {
  color: var(--point-color, #666);
}

この意味は、

• –point-colorがあればそれを使う
• なければ#666を使う

です。

初心者の方が練習するときは、この書き方を覚えておくと安心です。「変数がないせいで全部崩れる」という状態を避けやすくなります。

 

実務ではどう使うと便利か

実務では、同じパーツで色だけ変えるときに、クラスの内で定義したCSS変数がとても便利です。

たとえば、POINT1、POINT2、POINT3で、形は同じなのに色だけ変えたい場合です。

.point {
  --point-color: #f28c00;
}

.point--blue {
  --point-color: #14b5ff;
}

.point--pink {
  --point-color: #ff5fa2;
}

そして共通部分では、全部var(–point-color)を使います。

.point__label {
  color: var(--point-color);
}

.point__title {
  color: var(--point-color);
}

.point__line {
  color: var(--point-color);
}

.point__button {
  border-color: var(--point-color);
  color: var(--point-color);
}

こうしておくと、色を変えたい場所が散らばりません。あとで見直したときも、どこを触ればよいか分かりやすいです。

これは見た目だけの話ではなく、保守のしやすさにも効いてきます。

 

まとめ

クラスの内で定義したCSS変数は、そのクラスの中にある要素に対して効きます。逆に、HTMLの外に出た要素には届きません。

ここで大事なのは、クラス名の似た見た目ではなく、親子関係を含むHTML構造そのものです。

また、.point__titleのように__でつながっていても、それだけで子要素扱いになるわけではありません。これはあくまで命名ルールです。

初心者のうちは、「クラスの中で定義したCSS変数だから、この名前なら使えるはず」と思ってしまいがちです。

でも実際には、「その要素がHTML上で親の中にいるか」がいちばん重要です。

この考え方が分かると、CSS変数の使い方だけでなく、CSS全体の見通しもかなりよくなります。似たパーツの色違いを作るときも、修正の手間がぐっと減ります。