覚えておきたいCSS：currentColor

ちょっと面白いCSSを見つけたので記録。「currentColor」について…。

currentColor とは？

CSSで色を指定するキーワード（redやblueなど）のひとつとして使えるのが currentColor です。色の値を受け取る全てのプロパティで使用できます。

currentColor を値として指定すると、その要素の color プロパティで指定されている色を参照します。

また、親要素に指定した color を継承します。

currentColor が初期値になっているプロパティもあり、それらは currentColor を指定しなくても color を参照します。（box-shadow、border、outline、など）

すぐに使うことはなさそうですが、覚えておいて損はなさそうです。

サンプル1

<p class="red">
サンプルテキスト
</p>

.red{
     color: red;
     border-bottom: 2px solid currentColor;
}

サンプル2

親要素に指定した color を継承して、<p>タグ内の下線の色が表示されます。

<div class="red2">
<p>サンプルテキストサンプル</p>
</div>

.red2{
     color: red;
}
.red2 p{
     border-bottom: 2px solid currentColor;
}