HTMLでclassを振り分けたものへのCSSでの指定方法

Question

添付画像の中の、h1要素とh2要素をそれぞれ別の文字サイズをCSSで指定いく際、CSS側でのコードは下記1,2のどちらが適切なのでしょうか？もしくは、どちらでも問題ないのでしょうか？（h1の文字サイズを140px、h2の文字サイズを60pxに指定したい）
※同HTMLテキスト内には、他に<h1>と<h2>のタグはない場合

1,
.copy-container h1 {
font-size : 140px;
}
.copy-container h2 {
font-size : 60px;
}

2,
h1 {
font-size : 140px;
}

h2 {
font-size : 60px;
}

↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
本シートのデフォルト設定のため、各「{」の下の行のスベースが空けられておりません。ご了承ください。
知りたいのは、HTMLテキスト内に「h1」タグが1つしか存在しないのに、__”手前に「.copy-container」をつけるべきか”__ということです。

Comments

[m.ts10806]

全体のHTMLと、サイト・サービス要件次第かと思います。
点だけではなんとも言えない。

Answer 1

1,2ともあまりよくないです。
CSS詳細度の関係で、h1,h2にクラスをつけて、クラスセレクタのみで指定するのが望ましいです。

原則的に class セレクタで指定しておく

100年後も崩れないCSS勉強会 · 第1回「詳細度」

Comments

[girlstalk]

ありがとうございました！！現段階では、※idや、!imprortantを使うことは未学習でしたが、シートの中身が今後複雑になる中で、優先順位の意識が必要になることを理解できました！！参考にして頑張ります！！????

[Lhankor_Mhy]

お役に立てたようで何よりです

Answer 2

2のように、h1とかh2とかに直接スタイルを設定するときは、そのスタイルをシステム上の標準的なスタイルにしたいときくらいです。それ以外の場合は影響範囲が小さい１のようにした方が良いです。

Comments

[girlstalk]

簡潔で分かりやすいご回答ありがとうございます！！今の自分の知識レベルにおいて、すっと教えて頂いた意味が入りました！！????