CSSの「.」と「#」は何が違う？

私がCSSを独学でちらほらと編集するようになってぶつかったのが、

セレクタ（CSSの一番最初の部分）の「#」と「.」の違いです。

一番初めにCSSを編集するようになったツールでは、

必ず「#」を使っていたのですが、

その他の細かい部分を修正しようとすると「.」が現れました。

文字化けかと思いました…(笑)

ということで、「#」と「.」の違いにつて、学びます！

CSSのセレクタの種類

CSSのセレクタには、3つの種類から選んで指定することが出来ます。

①HTMLの要素

②クラス

③ID

この3つです！

過去にやったのは、①と②です。

①はHTMLファイルに書いてある要素を指定しますので、

指定した全ての要素にスタイルが反映されます。

②はクラス名でCSSを記述し、

スタイルを適用したい要素にクラス属性をつけることで、

クラス名のついたものだけにスタイルを反映させることが出来ます。

IDってなに！？

③のIDでの書き方は、先頭に「＃」を記述するだけです。

HTMLには

<p id=”today”>今日の学習</p>

これでOK！

「今日の学習」という部分だけの文字色がCSSで指定した赤になります。

お気づきの方もいるでしょう…

クラス名を付ける時と何が違うのか…と(笑)

同じような使い方をする「class」と「id」ですが、

実は役割が異なります。

class属性とid属性の違い

class属性：種別名を割り当てる

同じclass名を、ひとつのページの中で何度でも使える

id属性：固有の名前を割り当てる

同じidは、ひとつのページの中で一度しか使えない

【画像で解説！】

・class属性を使ったときのCSSの記述

.today {color:#ff0000}

・HTML

・id属性を使ったときのCSSの記述

#today {color:#ff0000}

・HTML

どっちが使いやすい？

多くの要素にスタイルを適用させたい場合には、

class属性を使うのが便利です。

むしろid属性を使ってしまうと、

複数の要素にスタイルを適用させられなくなってしまいます…

たとえ1つの要素にしか適用しないスタイルでも、

class属性を使ってスタイルを反映させることはできますので、

基本はclass属性を使う形で良いと思います！

idはいつ使う？

特別なスタイルの目印になりますので、

他とは違ったスタイルを適用させたいときは、

id属性を使うことで、スタイルシート（CSSファイル）を読むときも、

非常に読みやすく、わかりやすくなります＾＾

優先順位に注意！

class属性とid属性には、優先順位があります。

2つのパターンの場合についての優先順位をみてみましょう！

例）

<p class="today" id="tomorrow"> 〇〇〇 </p>

p要素に、class名「today」、id「tomorrow」と割り当てたとします。

①同じclass名に複数の装飾が指定されている場合

.today {color:#ff0000}

.today {color:#0000ff}　※こっちが優先！

同じクラス名に対して、同じプロパティが複数指定されている場合

一番最後に記述されたものが適用されます。

上記の場合は下の「文字色は青」は適用されます。

②classとidで複数の装飾が指定されている場合

#tomorrow {color:#ff0000}　※こっちが優先！

.today {color:#0000ff}

1つの要素にclass属性とid属性の両方が割り当てられ、

それぞれに対し、同じプロパティで別のスタイルが指定されている場合は、

idのスタイルが優先されます。

上記の場合は上の「文字色は赤」が適用されます。

【編集後記】

classとidを勉強したことによって、

私の今までぶち当たっていた謎が解明しました。

idを複数回使っていたのです。

だからうまく反映されなかったのです！

あースッキリ！

そして、たまたま初めて使ったツールと見本のCSSがidを使っていたため、

#を付けるのが当たり前かと思っていたら

要素またはclassが基本と知りました！

いやー勉強ってやるもんですねー(笑)

日々着々と知識がついていることを実感します！

次回からも様々なcssについて、勉強していきます！