idとclassはコーダーやフロントエンドエンジニアからすれば初歩中の初歩というイメージがあるかと思います。
ですが、浅い知識のままだと意外とハマる可能性が高いのです。

そんな方に向けて復習も兼ねてidとclassについて解説していきたいと思います。

idとclassの違い

idとclassについては、有名なのは下記かと思います。

上記の通り、idは１回までしか使えなくて、classは何回でも使えるからclassの方が使いやすいというのがよく聞く話かと思います。
実際、私もclassをよく使っていて、idはJSやjQueryで要素を操作するときに指定が楽なのでそのときに使用するくらいです。

では、idとclassの違いってこれだけでしょうか？

＿人人人人人人人人人人人人人人＿
＞　これだけではないのである　＜
￣Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y^Y￣

idとclassは結構違う

上の表にちょっと追加しました。

この時点で馴れている方は、今後コーディングする際にどんなことに気をつけなければいけないか分かったのではないでしょうか。

idは大文字小文字判別するのを意外と知らない人が多い

これは知ってる方ももしかしたらいるかもしれないですが、idは大文字小文字を区別します。
なので、下記の場合は「Test」というidのみが太字になります。

See the Pen idの大文字小文字区別 by financier (@financier) on CodePen.

なので、よくあるハマり方としては、idをキャメルケースで記述していて、CSSの方で大文字にするのを忘れて（または間違えて）「あれ？適用されてない？」ということが起こります。

数字から始めちゃいけないというのを意外と知らない人が多い

例えば、id="2020service"や、class="20th"など数字から始めることは出来ないです。
数字から始めること自体、そこまで多くないので実際にやってみてやっと気づくという方が多いかと思います。

classに関しては、ほとんどの文字が使用可能と書いてあるので、classの記法としては数字から始めることは問題ないです。
ですが、そもそもCSSのセレクタの記法ルールとして数字から始めることは始めることは出来ないので、結論として数字から始めることは出来ません。

See the Pen ExKzyGJ by financier (@financier) on CodePen.

そこそこ長い経歴のコーダーさんでも知らずにハマって相談してくるという例があったので、結構知らない方も多いのではないでしょうか。

まとめ

というわけで、idとclassの違いとルールについて説明しましたが、そこまで難しくはないと思います。
ですが、こういう記事って意外とないのでぜひとも参考にしていただければ幸いです。

その他、みんな嫌いなfloatや謎の上下margin相殺などCSSは結構奥深いですよね。
そんな奥深いCSSをぜひ楽しんでみてください。

参考文献

実践Web Standards Design