2021年9月11日解決済み

ul に list-style-type:none とするとその中にある ol には適用されないのはなぜですか?

ユーザー

この動画の別の方の質問で、
「list-style-type の指定は li に書いてもいいですか?」
https://dotinstall.com/questions/glkkqa7
があるのですが、その質問で分からない部分があります。

この質問の中では、liにlist-style-type :noneを指定すると全てのlist-styleが消えてしまうので、
ulに対してlist-style-type :noneを指定すればolに含まれるliの順序は消えないと説明されてました。

【HTML】
<ul>
  <li>
    <h2>山田太郎</h2>
    <ol>
      <li>がんばります。</li>
      <li>もっとがんばります。</li>
    </ol>
  </li>
  <li>
    <h2>山田二郎</h2>
    <ol>
      <li>がんばります。</li>
      <li>さらにがんばります。</li>
    </ol>
  </li>
</ul>

【CSS】
ul {
  list-style-type: none;
}

しかし、ソースコードを見たらulの中に全てのolやli要素も入っているのに、なぜ直下のli要素のリストだけが非表示になるのかが分かりません。

私のイメージでは全てのリストが含まれるulに対してlist-style-type :noneを実行すれば、
全てのリストが非表示になると考えていたのですが、ol直下のリストが非表示にならないのかが調べても分かりませんでした。

ul、liの特徴や、CSS の適用範囲について知識不足な部分があるかと思いますが、
ご回答いただければ幸いです。

スタッフ

この回答を見るにはプレミアムプランへの登録が必要です

プレミアムプランとは?