Q. 深く考えたことないけどなんでフォントカラーを全体に指定してもaタグの中は変わらないの？
なんかもう経験として知ってたからスルーしまくってたこの疑問。
あえて切り込んで調べてみることにしました！
暇だからじゃないよ。
A. 各ブラウザ（IE、Google Chrome…）でaタグにあらかじめフォントカラーを設定してあるから。
なんと。そんな単純なことだったのか。
なんかがっかりした。
確かにIEのリンクといえば青文字にアンダーライン！とかあるもんねぇ。
ちなみに私はCSSを書くときに最初に
CSS(はじめのほうに記述)
a{
color:red;
text-decoration:none;
}
とかなんとか書いてaタグ全体に反映されるようにします。
んで、イレギュラーで違う見た目にしたいときはクラスとかで細かく分けてた・・・んだけど、なにやら便利そうな記事を発見しました。
発見した記事 CSS tips - a タグの色が変わらないときは color: inherit を指定しよう | phiary
color: inherit;
inherit の意味は、親要素のプロパティの値を継承すること。
つまり color: inherit; は親要素のカラーを継承するって意味になる。
例えば、ヘッダーの色を共通で赤くしたいとします。しかも特殊な赤。
いつもの私はこうしてました。
See the Pen aタグの便利な使い方 by かぺ (@kapeking) on CodePen.
まず全体反映用に nav に文字色指定し、a にも同じ色を指定します。
css(上記から抜粋)
nav{ color:#ff0e29; }
nav a{ color:#ff0e29; }
でもこれ、ちょっと2度手間感あるしスマートじゃない。
そこで inherit を使うと・・・
css(いい感じの記述例)
nav{ color:#ff0e29; }
nav a{ color:inherit; }
これでも結果は全く同じ！navで指定したカラーを継承します。
これなら後からリンク色変えても問題ないですね。
今度から私も color: inherit; をガンガン使っていこうと思います！