【CSS】書き方によってマージンが反映されないのはなぜ？

Question

前提・実現したいこと

mainタグに対してマージンを指定しようとしたところ、
CSSの書き方によって反映されない書き方と反映されない書き方があることに気づきました。
下記にソースコードを記載しますので、理由を教えていただきたいです。

該当のソースコード

<main class="wrapper main">
  <h2>タイトル</h2>
  <p>内容</p>
  <a class="button" href="#MENU">メニュー</a>
</main>

下記の指定方法だと、マージンが反映されませんでした。

main{
  margin-top: 10%;
}

下記の指定方法だと、マージンが反映されました。

.main{
  margin-top: 10%;
}

Comments

[int32_t]

提示されているコードだけなら、どちらでも同じです。表示の差はありません。もし差がでるのなら、提示されていない部分に原因があるはずです。

Answer 1

.wrapper { margin: 0; }

とか、競合する指定があるんじゃないですか？
その場合、

main{ margin-top: 10%; }

だと、CSSのどこに書いても効かないはずですね。要素名だけの指定は優先順位が低いのでクラス指定されているものを上書きできません。

一方、↓だと.wrapperの指定より後に書いていれば効きます。同格の場合、後に記載されている指定が有効になります。

.main { margin-top: 10%; }

他の方が『対象が異なる』と言っているのはそういうことです。

Comments

[nano_creator]

回答ありがとうございます！

ご指摘のとおりでした。
上書き特性は知っていたのですが、
要素名での指定、クラス指定、id指定での優先度のほうが優先されるとは知りませんでした。

Answer 2

それは「CSSセレクタ」というもので、mainと.mainと#mainではそのスタイルを設定する対象が異なります。

こちらのページの解説がわかりやすいと思います。

CSSのセレクタとは？覚えておきたい25種類と書き方

Comments

[nano_creator]

回答ありがとうございます。

解説ページも教えていただきありがとうございます。
ですが、こちらについてはもちろん理解している上での質問でした。

私の試したHTMLでは、「main」も「.main」も同じものを指していると思っていたのですが、
この認識がそもそも間違っているのでしょうか？

Answer 3

.をつける場合は、classを指定する場合につけます！

Comments

[nano_creator]

回答ありがとうございます。

私の試したHTMLでは、「main」も「.main」も同じものを指していると思っていたのですが、
この認識がそもそも間違っているのでしょうか？

[uoyuta]

classセレクタを指定する場合は、「.クラス名」の形でCSSファイルに記述します。
HTMLで指定したclass名をCSSのセレクタというので、mainはclassセレクタではないですね！

[maisumakun]

> mainはclassセレクタではないですね！

いえ、「main」単体でも<main>に適用される要素セレクタです。、