inherit

概要

通常は継承されないプロパティ（border、paddingなど）に対してinheritを指定すると、親要素の値を強制的に継承させることができます。また、継承されるプロパティの値を明示的に親から引き継ぐ意図を示す場合にも使用します。カスケードと継承の仕組みを理解する上で基本的なキーワードです。

対応ブラウザ

基本構文

.child {
  border: inherit;
  color: inherit;
  font-size: inherit;
}

実務での使いどころ

• リンクの色を親要素から継承

  リンクのデフォルト色を上書きし、親要素のテキスト色を継承させることで、デザインの一貫性を保ちます。

注意点

アクセシビリティ

• 色をinheritで継承する場合、継承元の色とコンテンツのコントラスト比がアクセシビリティ基準を満たしているか確認してください。

参考リンク

• MDN Web Docs — inherit