css の #(シャープ) と .(ドット) の違い

 

css で定義するとき #(シャープ) と .(ドット) の違いを知らなかったのですが、

これには明確に用途が異なるようです。

 

例えば HTML 側で

 

   <div      id="hoge_1"></div>

   <div class="hoge_2"></div>

 

という風に div 要素を使い id と class を使用する場合、css でのルールでは

以下の通りになっています。

 

　 id     ＝ 1回のみ使える    #(シャープ)
  class   ＝ 何回でも使える   . (ドット)

 

という関係のようです。

 

hoge.css

 

#hoge_1{}

.hoge_2{}

 

 

１回しか使用してはならない id を何度も間違って使ってしまうという人為的ミスを

抑えるなら、定義にはドットを使用して class にするって言うのも良いかも。

 

とは言っても javascript を用いて動的に css のプロパティ値を変えるなら id の方が

便利そうですね。