.products .container ul li a h2 { ... } ではなく、 .products li h2 { ... } とするのはなぜですか?

シンプルにいうとそこまで書く必要がないからです。
2022年10月27日
ユーザー

入れ子構造の CSS を指定するときに記述する要素としない要素はどう判断すればいいですか?

  <section class="products">
    <div class="container">
      <h1>OUR ITEMS</h1>
      <ul>
        <li>
          <a href="#">
            <img src="img/pic1.png" alt="素敵な家具">
            <h2>素敵な家具</h2>
            <p>20,000円</p>
          </a>
        </li>
      </ul>
    </div><!-- /.container -->
  </section><!-- /.products -->

ここで h2 を指定したい場合、もし囲っているものすべて書くと下記のようになると思うのですが、
ここで .containerula を書かない理由を教えていただきたいです。

.products .container ul li a h2 {
  font-size: 16px;
  margin-top: 8px;
}

この回答を見るにはプレミアムサービスへの登録が必要です

プレミアムサービスとは?