[CSS]クラス名は同じだが、違う要素に適応したい時のやり方がわからない

Question

前提・実現したいこと

以下のような場合において、クラス名は変更したくない場合にどのようにすれば区別できるでしょうか。
idを付与すればできますか？
どのようなやり方があるか教えていただきたいです。

発生している問題・エラーメッセージ

//divに適応させたい
.hoge {
 width: 300px,
 height: 200px
}

//buttonに適応させたい
.hoge {
 width: 30px,
 height: 20px
}

該当のソースコード

<div class="hoge">
 <p></p>
</div>

<div>
 <button class="hoge"></button>
</div>

Comments

[maisumakun]

「クラス名は変更したくない」とありますが、他のクラスを追加することはできますか？

[aiai8976]

可能です。

Answer 1

それぞれに対応させたいのなら

//divに適応させたい
div.hoge {
 width: 300px,
 height: 200px
}

//buttonに適応させたい
button.hoge {
 width: 30px,
 height: 20px
}

class名はその要素を識別するための名前です。
「google html コーディング規約」
では、出来るだけその要素が何か分かるような名称を付ける事を求めています。
(従うかどうか好みではありますが、、^^; )

上の例のように明らかに同じとは思えない要素に
同じclass名を付けるのは考えなおされた方が良いのでは
と思います

Answer 2

• タグ要素を指定したクラス
• なにかに含まれている（直下にある）クラス
• 別のクラスがついている（ついていない）クラス

など判別できます

Comments

[yambejp]

CSSでそのままできないのは、
・何かの要素を含むクラス
・同じクラスの中のn番目の要素

みたいなやつで、そういうのはjsでやります

Answer 3

クラスhogeのついたdivタグに適用させるということであれば

div.hoge {
}

Comments

[aiai8976]

なるほど。もしbutonnがdivの中に入っていた場合にはどのようにすればいいでしょうか。

[SakuBlade]

butonnがdivの中に入っていた場合というのがどういう事かわかりません

<div class="hoge">
<button class="hoge"></button>
</div>
のような同名のクラスのついているコードのことでしょうか？

[aiai8976]

上に記載しました。
確認お願いします。

[maisumakun]

元のコードのままで問題ありません。div.hogeは、後者にはヒットしません。