inheritが適用されない理由がわからない。

【HTMLのbody内】

<header>
  <nav>
    <ul>
      <li>
        <a href="index.html">
          HOME
        </a>
      </li>
      <li>
        <a href="about.html">
          ABOUT
        </a>
      </li>
    </ul>
  </nav>
  <img src="img/header.png" width="400"height="130"alt="ヘッダー画像">
</header>

【CSS】

body{
  color: #333;
  font-family: Verdana,sans-serif;
  margin: 0;
}

header{
  background-color: pink;
  border: 2px dashed tomato;
  padding: 50px;
}

ul{
  margin: 0;
  list-style-type: none;
  padding-left: 0;
}

li{
  display: inline-block;
  padding:4px 8px;
  font-size: 12px;
}

a{
  text-decoration: none;
  color: inherit;
  border: inherit;
}

このaセレクタに、

border: 2px dashed tomato;

こうすればボーダーが適用されますが。

もし、inherit のルールが、『その親要素のみの影響を受けて作動される』のなら、
color: inherit;　は何故、bodyタグからの影響なのに作動して色が変わっているのでしょうか？

規則性がまるで理解できません。

行動規範の内容に同意します

回答1件

ベストアンサー

もし、inherit のルールが、『その親要素のみの影響を受けて作動される』のなら、

color: inherit;　は何故、bodyタグからの影響なのに作動して色が変わっているのでしょうか？

そのプロパティがデフォルトで継承を行うかどうかによって、動作に違いが発生しています。

デフォルトで継承を行うプロパティは、子要素にそのプロパティが適用されていない場合、自動的に親要素にあるそのプロパティの値を適用します。逆に、デフォルトで継承を行わないプロパティは、子要素にそのプロパティの値が適用されていない場合、そのプロパティの初期値を適用します。

仕様を確認するとわかるように、colorプロパティは前者で、borderプロパティは後者です。

Name: color

Value: <color> | inherit
Initial: depends on user agent
Applies to: all elements
Inherited: yes
Percentages: N/A visual

参考: CSS Color Module Level 3 - 3.1. Foreground color: the ‘color’ property

Name: border

Value: [ <border-width> || <border-style> || <'border-top-color'> ] | inherit
Initial: see individual properties
Applies to: all elements
Inherited: no
Percentages: N/A
Media: visual
Computed value: see individual properties

参考: Box model - 8.5.4 Border shorthand properties

そのため、colorプロパティの場合は、body要素から子孫要素のli要素まで、デフォルトで行われる継承により文字色が適用され、a要素のinheritにより、a要素のユーザーエージェントスタイルシートが上書きされ、a要素に継承された CSS が適用されます。
しかし、borderプロパティの場合、デフォルトでの継承が行われないため、li要素にはborderプロパティの初期値(border: medium currentcolor none)が適用されます。borderプロパティの初期値では、border-styleプロパティに対してnoneが設定されるため、 border が表示されません。a要素はこれを継承するので、当然a要素でも border が表示されることはありません。

投稿2019/02/18 16:38

編集2019/02/18 16:49

s8_chu

総合スコア14731

s8_chu

2019/02/18 16:51

こちら( https://w3g.jp/css/guide/inheritance )の Web ページを読むと、質問者さんが疑問に思っていることが、より理解できると思います。

退会済みユーザー

2019/02/19 06:25

かなりふわっとですが理解できたかと思います。要は、・colorプロパティは子孫の結構先まで影響する・borderプロパティは子要素に影響しない今回のケースだと、colorプロパティは　<body>要素から見て4つ先の子孫である、　<li>要素まで影響してる為、 aセレクタが　inherit　しても　<a>の親要素は<li>だがら、反映される。一方でborderプロパティは、<header>要素から見て0個先（つまりheaderのみ）しか影響されていない為、 <a>の親要素である<li>がborderの影響を受けていない事から、 aセレクタに　inherit　しても『意味がない』反映されない。 ↑ふわっとしてますが、この認識であってますでしょうか？もしこの認識が間違っていましたら、結構混乱します笑

s8_chu

2019/02/20 12:46

> ↑ふわっとしてますが、この認識であってますでしょうか？はい。合っていると思います。

退会済みユーザー

2019/02/20 15:00

良かったです、安心しました。ありがとうございます

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.31%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう！

inheritが適用されない理由がわからない。

関連した質問