classの使い方がいまいちわかっていません。。。

Question

<div class="header-right"> <a href="#" class="login">ログイン</a> </div>

上記のような場合、CSS場でコード記入する際に、

.header-right{
color:red;
}

とするのと

.login{
color:red;
}

とするのとでは、何かその後のコードに影響するなどの違いはあるのでしょうか？

よろしくお願い致します。

Comments

[kei344]

（質問文は編集できます）質問文のコードはそれぞれコードブロックで囲んでいただけませんか？ ```（バッククオート3つ）で囲み、前後に改行をいれるか、コードを選択して「<code>」ボタンを押すとコードブロックになります。

Answer 1

その後のコードに影響する

その後の作りによるとしか言えません。
これだけだと何がしたいのかがわからないですしね。
影響してほしくないのでしたら同じクラスを指定するのでも、単体ではなく階層で指定するとか、親子を明示するとかすると良いです。

Comments

[takaboy]

ご回答をいいただきありがとうございます！
内容理解いたしました！
助かりました。

[m.ts10806]

解決されたようで何よりです

Answer 2

.header-right{
color:red;
}
を記述すると、.header-rightクラスのdivタグに入っている全ての要素にcssが適応されます。

一方で.login{
color:red;
}
は、<a href="#" class="login">ログイン</a>にのみ適応されます。

Comments

[takaboy]

ご回答いただきありがとうございます！
少し質問内容に漏れがあったので、もう一度教えていただけましたら幸いです。
.header-right a{
color:red;
}
とするのと
.login{
color:red;
}
とするのは同じ意味ではないのでしょうか？

[Kkktr]

同じ意味ですが、
header-rightクラスにaを追加するとそれにもcssが適応されてしまいます。
別々のcssを適応したいのであれば、それぞれ違うのクラス名を定義した方が良いと思います。

Answer 3

提示コードのみで言えば、結果はどちらも「同じ」。（厳密には「a」が抜けてますが）

その後に続くコードがあれば、「header-right」がheader部の右側しか使えないクラス名となり（厳密には使えますが、混乱の素となります）、「login」の方が汎用性があると言えます。

Comments

[takaboy]

記載ミスあったにも関わらず、考慮いただいたご回答をいいただきありがとうございます！

内容理解いたしました！
助かりました。

[yoshinavi]

classを付与する理由として、大まかに言えば、
①他の要素にも「同じ」CSSを設定するため
②他の要素とは「違う」CSSを設定するため

と相反しますが、目的に合わせて、2つの理由があります。

解決されて何よりです。
(^^)