inherit
inherit は CSS のキーワードで、要素のプロパティの計算値を親要素から取得するよう指定します。 CSS の一括指定 all を含め、すべての CSS プロパティに適用することができます。
継承プロパティにおいては、既定の動作を推進するものであり、他のルールを上書きする場合にのみ必要です。
メモ: 親要素が包含ブロックではなかった場合であっても、常に文書ツリー内の親要素から継承が行われます。
対応ブラウザ
| 機能 | デスクトップ | モバイル | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
global_keywords | 1 | 12 | 1 | 1 | 18 | 1 |
| inherit は CSS のキーワードで、要素のプロパティの計算値を親要素から取得するよう指定します。 CSS の一括指定 all を含め、すべての CSS プロパティに適用することができます。 | 1 | 12 | 1 | 1 | 18 | 1 |
基本構文
CSS
.child {
border: inherit;
color: inherit;
font-size: inherit;
}ライブデモ
実務での使いどころ
-
リンクの色を親要素から継承
リンクのデフォルト色を上書きし、親要素のテキスト色を継承させることで、デザインの一貫性を保ちます。
注意点
- inheritは直近の親要素の計算値を継承するため、祖先要素のスタイルではなく親要素のスタイルが適用されます。
アクセシビリティ
- 色をinheritで継承する場合、継承元の色とコンテンツのコントラスト比がアクセシビリティ基準を満たしているか確認してください。