【CSS】currentColorの使い方

どうも、くまだです。

currentColorプロパティの使い方。

currentColorの使い方

currentColorプロパティは、色を変数のように指定することができるプロパティです。

例えば、文字色と線の色を同じ色で指定したいときは下記のように指定します。

<div class="p-box">
  <p class="p-box__text">currentColor</p>
</div>

.p-box {
  color: red;
  font-size: 16px;
  border: 1px solid currentColor;
  display: inline-block;
  padding: 20px;

}

文字色にredを、線の色にはcurrentColor を指定しています。

なお、currentColorは子要素に使えば、親要素の色を継承します。

.p-box__text {
  color: currentColor;
  border-bottom: 1px solid currentColor;
}

他にもSVG画像の色を動的にすることもできますが、SVG画像は用意していないので、割愛。

使いどころとしては、例えば文字色と線の色がいっしょのときにcurrentColorを使えば、親要素の色を変更すると、親要素を継承したcurrentColorを指定した子要素は自動的に色が変更されるので修正が楽になる、ところもあるかも笑

ここまで読んでくださりありがとうございました。