メモログ

リンクの色の方が優先される理由の記事で、下記のHTMLの場合はリンクの色の方が優先されるという話をした。

1
2

<h3 class="entry-header"><a href="/post.html">記事のタイトル</a></h3>

1
2

a {color: blue;}
h3.entry-header {color: red;}

では、h3.entry-headerで指定した色をリンク色として継承したい場合はどうしたら良いのか。それにはcolorプロパティにinheritを設定する。inheritは親要素の値を継承するので、h3.entry-headerで指定した色になる。これは便利。親要素の色をリンク色に継承するためのclass属性を用意しておけば、一つずつリンク色を指定する必要がなくなる。

1

<h3 class="entry-header"><a href="/post.html" class="inherit" >記事のタイトル</a></h3>

1
2
3
4

a {color: blue;}
h3.entry-header {color: red;}
.inherit {color: inherit;}

ところが、IE6、IE7ではこの値が機能しない（IE8では機能するらしい）。そのため、しばらくは他の手段で対応するしかないわけですが、 いずれはinheritを設定するだけで思いどおりの表示にできそう。世の中はますます便利に。