CSS classに関して

Question

下記CSSではfeaturesクラスの中のh1とcontainerを指定していますが
なぜh1を指定する際は＞を使うのに、containerの場合はドットを使うのですか？

.features > h1 {
text-align:center;
padding:64x 0;
font-weight: normal;
}

.features .container {
margin:0 32px;
}

Comments

[m.ts10806]

色々試してみたら分かることもあると思うのですけど

Answer 1

なぜh1を指定する際は＞を使うのに、containerの場合はドットを使うのですか？

h1の前の>は、「親要素の直下にある子要素」の指定で、クラスの指定とも併用できます。

.foo > .bar {
  /* ここは、class="foo"の直接の子要素となっている.barに適用される */
}

Answer 2

セレクタを、どのように指定するかの違いなだけで、<h1>は必ず「 > 」が必要な訳ではありません。

例）

<div class="features">
  <h1>※ここは赤色※</h1>
  <div class="hoge">
    <h1>※ここは黒色※</h1>
  </div>
  <div class="hoge">
    <div class="container">※ここは青色※</div>
  </div>
</div>

<div class="container">※ここは黒色※</div>

.features > h1 {
  color: red;
}

.features .container {
  color: blue;
}

※何度も編集スミマセン。

良く質問を読み返しました。質問者さんは少し考え違いをしています。
「h1」
→　HTMLで定義されているタグ（要素）

「.container」
→　上記で定義されたタグに、class属性を付与したもの

この違いになります。
「 > 」はセレクタの指定方法のため、上記の提示コードを参照してください。

Answer 3

cssでHTMLタグを指定する際は、頭に記号をつけません。
casでclassを指定する際は、頭に . を付けます。
それ以外の、半角スペースや > は、左側に指定したものと、右側に指定したものの位置関係を表すものです。
下記を見たらわかると思います。
https://webliker.info/css-selector-cheat-sheet/