WEB制作

CSSの強制継承「inherit」は他人が作ったグダグタなCSSをリセットしたい時に有効

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

cssの基本として親要素のプロパティ(色とか)を子要素が引き継ぐというものがある。

自分がデザインしたcssならまだしも、他人が作ったcssだと非常に入り組んでいるような場合がある。ひたすらデベロッパーツールをいじくりまわしても、何がどうなっているか簡単に見つけ出すことができない。

やっと目的のクラスやプロパティらしきものを発見しても、複数のcssによってプロパティが上書き、上書きとグダグダになっている場合、簡単に修正できない場合がある。

むしろ初期状態に戻すのがinherit

そういうグダグダな作りのcssの場合、往々にしてあなたが想定している継承が無効化されていることがある。CMSで動的に強い力でcssが割り当てられているようなケースだ。

そんな時には強制的に継承させるプロパティ「inherit」が役に立つ。どちらかというと初期状態に戻す処理になる。

もしかしたら、人によってはあまり使ったことがないかもしれないが「inherit」は色やフォントなども含め、全てのプロパティに適用させることができる。

使い方の例
#sidebar h2 { color: inherit; }

詳しい使い方を知りたい場合はこちらのページが役に立つ。
https://developer.mozilla.org/ja/docs/Web/CSS/inherit