CSSのinherit

以前にCSSの親子継承についてこちらで簡単に触れていた。
http://d.hatena.ne.jp/ynsyns/20081119/

ブロックなプロパティは継承しないということだったが、実はinheritを指定すれば継承することができる。
※inheritはIE6,7の坊ちゃんには通用しない。

<style>
div{margin:10px;}
p{margin:inherit;} /* 親要素のmarginを継承 */
</style>

<div>
 <p>パラグラフ</p>
</div>

これの特徴は動的に親要素のブロックプロパティを継承できるということだが、継承させたいときもあれば、固定値にしたいときもあるのでケースバイケースで使い分けが必要。

例えば、親要素の持つブロックプロパティを全て継承させたい場合、classを作っておくという手もある。
しかし実用性は低いか。

<style>
.inherit{   /* 親要素の全てのブロックプロパティの継承 */
  margin:inherit;
  padding:inherit;
  border:inherit;
  display:inherit;
  position:inherit;  
  float:inherit;
  width:inherit;
  height:inherit;
  overflow:inherit;
　clear:inherit;
  visibility:inherit;
  z-index:inherit;
}
</style>

<div>
 <p class="inherit">パラグラフ</p>
</div>

なんかこれだったら、要素の全称セレクタ*1のようにプロパティのワイルドカードもあればよいのにと思った。

*1:最近では全称セレクタ自体があまり使われない方向。