CSS 継承のサンプル(inherit)

目次

CSSの継承

CSSの継承とは

  • CSSの継承とは、CSSの効果が親要素から子要素にも反映されることです。
  • 継承されるものと継承されないものがあります。
  • テキストやフォント関連のプロパティは値が継承されるものが多いです。
  • マージン(margin)やパディング(padding)などは値が継承されません。
  • inheritを使用すると強制的に値を継承させることができます。

 

cssのcolorで継承させる例

<style>
  .div2 {
    color: red;
  }
</style>
<div class="div1">
  テスト1
  <div class="div2">
    テスト2
    <div class="div3">テスト3</div>
  </div>
</div>

3行目でクラスdiv2の文字の色を指定しています。
9行目のクラスdiv2の文字の色は3行目で指定した色になります。
10行目のクラスdiv3の文字の色も親要素から値が継承され3行目で指定した色になります。

上記コードの結果です。

 

inheritで継承させる例

marginはデフォルトでは継承されない

<style>
    .t5 {
        margin-left: 10px;
        border: solid 3px orange;
    }
    .t6 {
        border: solid 3px blue;
    }
</style>
<div class="t5">
    test5
    <div class="t6">test6</div>
</div>

3,4行目でクラスt5のマージン(margin-left)を10pxに指定しています。
10行目のクラスt5のマージン(margin-left)は3行目で指定した幅になります。
12行目のクラスt6にはマージンの値は継承されません。

上記コードの結果です。
テスト6の左側のマージンに10pxの幅はありません。

test5
test6

 

inheritでmarginを強制的に継承させる例

<style>
    .t8 {
        margin-left: 10px;
        border: solid 3px orange;
    }
    .t9 {
        margin-left: inherit;
        border: solid 3px blue;
    }
</style>
<div class="t8">
    test8
    <div class="t9">test9</div>
</div>

2,3行目でクラスt8のマージン(margin-left)を10pxに指定しています。
7行目でマージンにinheritを指定しています。
11行目のクラスt8のマージン(margin-left)は3行目で指定した幅になります。
13行目のクラスt9は、7行目のinheritのため親要素のクラスt8のマージン(margin-left)が継承されて適用されます。

上記コードの結果です。
テスト6の左側のマージンに10pxの幅があります。

test8
test9

 

関連の記事

CSSを記述する場所のサンプル
CSS セレクタの優先順位(!important)

△上に戻る