WEB制作

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

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

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

自分が書いたcssならまだしも、前任者から引き継いだcssをいじるとなると、その人の手癖や自分よりレベルの高い書き方(笑)などの要因によって、修正したり書き換えるのが困難な場合がある。

これはCSSに限らず、プログラミング言語などでも他人が書いたコードをいじるというのは難しいのだ。

ひたすらデベロッパーツールをいじくりまわしても、何がどうなっているか簡単に見つけ出すことができない。

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

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

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

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

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

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

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