リンクの色が変更できません

2025.03.23

リンクの色を変えようとしても変わらない場合、<a>要素ではなく、その親要素の色を変更しようとしていることがよくあります。リンクの文字色は<a>要素自体に設定する必要があります。

HTMLの例

<div class="parent">
    <a href="#">リンクテキスト</a>
</div>

NG例（親要素に色を指定している）

.parent {
    color: red; /* これではリンクの色は変わりません */
}

正しい方法（a要素に色を指定する）

a {
    color: red; /* これでリンクの文字色が変わります */
}

ポイント

必ず<a>要素に直接colorを指定しましょう。親要素にcolorを指定しても、<a>要素のスタイルが優先されるため、リンクの色は変わりません。

See the Pen Changing link colour by Miyazaki Yuuki (@M-Yuuki) on CodePen.