読者です 読者をやめる 読者になる 読者になる

north-memo

数学できない方の数学科のブログ、一応デザイナー…なのか…?

ナビゲーションとかでaタグのcolorを切る方法

ナビゲーションを作るときとか

<ul>
    <li><a href="#">メニュー1</a></li>
    <li><a href="#">メニュー2</a></li>
    <li><a href="#">メニュー3</a></li>
</ul>

みたいな感じで書くことよくあるじゃない。

でも、これだとaタグのcolor値が優先されて、liのcolor値が反映しない。 そうなると、aタグにクラスをつけていちいち設定しないといけない…。

このときに役にに立つのがinherit値 inheritは、親要素の値を継承するというもので、

li {
    color: #222;
}
a {
    color: inherit;
}

と書いてあげれば、aタグの色はliの色を反映させることができる。

素晴らしいinherit