HTMLのタグ階層構造が変化している…？？

HTML、CSS初学者です。
検索の仕方が悪いのか、ネットを駆使しても解決しなかったのでご教示ください。

疑問

親要素であるp要素の中にb要素を記述してありました。
そこに新たに子要素としてdiv要素を追加したところ、
CSSの子孫セレクタでb要素を指定できなくなりました。

試行錯誤したところ、間接セレクタを用いればb要素を指定することができるとわかりました。
p要素の子要素であるはずのb要素がp要素と同階層として扱われている…ということでしょうか…？

なぜこのような現象が起きるのかわかりません。
複数の子要素を持つと親要素と同階層になるのですか…？？
階層について私がなにか誤解をしているのでしょうか。
今後HTMLやCSSを扱うにあたってこの現象の原因について知りたいです。
よろしくお願いします。

該当のソースコード

HTMLとCSSを用いて

（略）
        <style>
            .player b {
                font-size: 12px;
                color: red;
            }
        </style>
    </head>

    <body>
        <p class="player p1">
        <div class="icon">
            <img src="img/neko.png">
        </div>
        <b>猫</b>
        <span class="dice">1d100 (1D100) ＞ 94</span>
        </p>
    </body>

と記述したところ、b要素の色やサイズが変更されなくなりました。
下記の記述であれば正しく反映されます。

（略）
        <style>
            .player b {
                font-size: 12px;
                color: red;
            }
        </style>
    </head>

    <body>
        <p class="player p1">
            <b>猫</b>
            <span class="dice">1d100 (1D100) ＞ 94</span>
        </p>
    </body>

また、下記のように間接セレクタを用いればb要素を指定できます。

（略）
        <style>
            .player~b {
                font-size: 12px;
                color: red;
            }
        </style>
    </head>

    <body>
        <p class="player p1">
        <div class="icon">
            <img src="img/neko.png">
        </div>
        <b>猫</b>
        <span class="dice">1d100 (1D100) ＞ 94</span>
        </p>
    </body>

補足情報（FW/ツールのバージョンなど）

VisualStudioCode 1.56.2

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

回答2件

pタグの中にdivタグを入れることは出来ません。
おそらく、やっては駄目なことをやってるので子孫セレクタが効いていないのだと思います。

投稿2021/06/25 19:19

Jon_do

総合スコア1373

meteors77

2021/06/29 12:44

なるほど！そういえばたしかに、div要素を子要素にできない場合があると学んだ覚えがあります…！忘れてました…。気を付けます！ご回答いただきありがとうございました！

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

ベストアンサー

MDNによると、pタグは、

タグの省略開始タグは必須。後続する要素が ..., <div>, ...のいずれかである、...場合は終了タグを省略することが可能。

<p>: 段落要素 - HTML: HyperText Markup Language | MDN

となっているため、終了タグが省略されたものとみなされ、以下のように補完されたのだと思います。

html
1    <body>
2        <p class="player p1">
3        </p> <!-- 省略された終了タグがブラウザに補完された -->
4        <div class="icon">
5            <img src="img/neko.png">
6        </div>
7        <b>猫</b>
8        <span class="dice">1d100 (1D100) ＞ 94</span>
9        </p>
10    </body>