本サイトはアフィリエイト広告を利用しています

覚えておきたい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;
}

サンプルテキストサンプル


- スポンサーリンク -
HTML&CSS
タイトルとURLをコピーしました