hrefを指定するとaタグは文字色を引き継がない – CSS

<a>タグは特定の要素に対してリンクを指定する際に使用するHTMLタグです。大抵のブラウザではhrefでリンク指定された文字は青色になり下線が装飾されます。

<div><a href="#">ここをクリック</a></div>

実行結果

下線を消したい場合はcssで”text-decoration:none”を指定します。また、色を変えたいときには<a>タグに対して色指定を行います。

.decoration-none {
text-decoration:none;
}
.red-color {
color : #F00;
}

<div><a href="#" class="decoration-none red-color">ここをクリック</a></div>

実行結果

注意したいのは、親要素で指定した色は「hrefでリンク付けされた<a>タグの文字色」に引き継がれません。

<div class="red-color"><a href="#" class="decoration-none ">ここをクリック</a></div>

実行結果

このように親要素で文字色を赤としても、子要素の<a>タグの文字色は青のままです。ただし、hrefリンク付けされていない<a>タグの文字色は親要素の色を引き継ぐのです。

<div class="red-color"><a class="decoration-none ">ここをクリック</a></div>

実行結果

基本<a>タグにはhref属性を付けるとは思いますが、もしhrefあり/なしが混在している場合には留意したい仕様です。