Divタグについて。

Question

〈div class＝"example"〉
〈p〉There is a dog 〈/p〉
〈/div〉

ここでclassを、
.example
｛color: white; ｝
で指定すると、P タグの中の文字が変わりますが、なぜ exampleに指定してるのに、P タグの文字は変わるのでしょうか？

Comments

[m.ts10806]

〈〉
↑そもそもHTMLとして使えないので動きません。
コードはコピペしてください。
マークダウンで提示してください。

[m.ts10806]

あと、調べればわかることも多いです。調べたこと試したことを記載してください

Answer 1

css 継承 - Google 検索

Comments

[Teppei.h]

ありがとうございます

Answer 2

なぜそういう仕様がつくられたのか、私の解釈を書いてみます。

以下の場合を考えてみてください。

<div class="example">
  <div class="example-header">
    <h2>title title</h2>
  </div>
  <p>There is a dog</p>
  <ul>
    <li><a href="">aaaaaa</a></li>
  </ul>
  <p>aaaa aaa aaaaaaa <a href="">リンク文字</a> aaa aaaaaaa</p>
</div>

「.example」の背景色が黒で、すべての文字を白にしたいと思ったとき、
もし「.example」に指定した文字色の指定が子要素には反映されなかったらどうなるでしょうか?

.example
.example div
.example h2
.example p
.example li
.example a {
  color: white;
}

↑このような形でcolor: white;を指定しなければならなくなります。面倒じゃないですか?

上記のような面倒な記述を減らすため、
「.example」に文字色を指定すると子要素にも反映されるという仕様があるのだと考えると納得できるのでは、と思われます。

.example {
  color: white;
}

---

技術的な仕様としては以下を見てみてください。
https://developer.mozilla.org/ja/docs/Web/CSS/inheritance

Answer 3

コメントでの指摘を受けて、回答を訂正します。
〈div class＝"example"〉と対応する〈/div〉の間の全てが、"example"というクラスなので、

.example
｛color: white; ｝

とすれば、〈div class＝"example"〉と対応する〈/div〉の間のコンテンツに適用されますが、その中に、<p>などのオブジェクトがあれば、そのオブジェクトに継承されます。だから、"There is a dog"は白くなります。

<p>に新たに、｛color: red; ｝を指定すれば、上書きされて、"There is a dog"は赤くなります。 "~~は、当然、"<p>There is a dog</p>"に適用されます。~~

Comments

[Teppei.h]

なるほど、ここでいちいちP タグに色指定しなくていいんですね。
回答ありがとうございます。

[thyda.eiqau]

この表現は正確ではありません。.example > pに対して、.exampleに指定したスタイルがすべて適用されるかのように読めます。実際にはそのような動きにはなりません。

[m.ts10806]

> 間の全てが、"example"というクラスなので、

違いますよ。「継承」です。
https://developer.mozilla.org/ja/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance

[yiwsk]

なるほど、理解が浅かったです。
exampleの中にある<p>は、exampleクラスを継承するのですね。

質問の趣旨が、cssの適用範囲だと思ったので、あのような答え方をしましたが、表現が不正確でした。

[m.ts10806]

質問者及び後から読む人が間違った理解のまま進んでしまうと弊害しかないので、今からでも訂正して質問者に再考を促した方が良いと思います（私も低評価しています）

[thyda.eiqau]

より正確には、exampleというクラスの中にある<p>のcolorの値が、exampleクラスに指定されたcolorの値を継承しています。言葉を省略しているだけかもしれませんが。

[yiwsk]

すみません、不正確な投稿をして、どのように訂正すればいいですか？
回答を訂正してしまうと、それについたコメントが無意味になってしまいますね。

[m.ts10806]

「それぞれのタグが持つそれぞれの指定のデフォルト値」の考え方も可能なら覚えておきたい。

[thyda.eiqau]

追記すればよいです。もとの投稿内容は残して（打ち消し線を入れる方もいらっしゃいます）末尾に書き足すのがよいと思います。

[m.ts10806]

取り消し線をつけた上で、「コメントでの指摘を受け訂正します」とか一言書いておけば良いと思います。
（いずれにしても編集履歴から確認できるので「完全無意味」にはなりませんが、残しておいた方が丁寧）

[yiwsk]

確かに、exampleに｛color: white; ｝を指定しても、その中にある<p>に｛color: red; ｝を指定すれば、"There is a dog"は赤くなりますね。指定しなければ、上位クラスの指定が継承されるということですね。すみません。

[thyda.eiqau]

ご認識のとおりです。同じように、.example { border: 1px solid #f00; } としても、pには継承されません（もしborderの値も継承されるとしたら、pのborderとdivのborderの2本が表示されるはず）。継承されるプロパティとされないプロパティがあるということはCascading Style Sheetの "Cascading" のなんたるかの基本のところなので、覚えておく必要があります。

[yiwsk]

若輩者が回答して迷惑をおかけしました。とても勉強になりました。ありがとうございます。

[thyda.eiqau]

いや、別に迷惑ってことはないですが。私も何度かコメントで指摘されて認識を正せたり深められたりした経験があります。この手のフォーラム系のサービスの面白いところですね。

[m.ts10806]

確認しました。私の低評価を外しました。
※でも当の質問者は丸投げ繰り返してるだけなので伝わらなそうなのが残念
〈〉をそのまんまにしてるし

[yiwsk]

いつもは、質問をして助けていただく側なので、たまにはお答えして役に立てるかなと思ったのですが、甘かったですね。汗　若輩者と書きましたが、還暦越えのサンデープログラマーです。
Cascading（階層）の意味が、本当によく理解できました。

[m.ts10806]

＞質問をして助けていただく側なので、たまにはお答えして役に立てるかなと思ったのですが

非常に良い心がけかと思います。
回答することで自身の理解度を確かめられるし、深めることも出来る。
私は回答一本でやってきてますが、自身でも成長は感じています。
がんばってください。