inheritプロパティでスタイルを強制的に継承する
cssのプロパティによっては親要素のスタイルが子要素に引き継がれないものがあります。
そのような場合にはスタイルを強制的に継承させたい子要素にinheritプロパティを使用します。
今回はデフォルトでは子要素に引き継がれないborderプロパティを例に解説します。
HTML
|
1 2 3 4 |
<div class="parent"> <h1>Theme</h1> <p>テキストテキストテキストテキスト</p> </div> |
CSS
|
1 2 3 4 5 6 7 8 |
@charset "UTF-8"; .parent{ margin:10% 20%; padding:20px; color:blue; border:6px solid pink; } |
borderプロパティで作成した枠線が親要素のdivタグのみに適用されている。
(子要素のh1タグ、pタグには適用されていない)
※colorプロパティはデフォルトで子要素に引き継がれている。
子要素(h1タグ,pタグ)のborderプロパティにinheritを指定する。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
@charset "UTF-8"; .parent{ margin:10% 20%; padding:20px; color:blue; border:6px solid pink; } h1,p { border:inherit; } |
borderのスタイルがh1タグ、pタグへ継承されました。
Follow me!
