CSSにおけるclass指定とid指定の違いとは？

CSSで要素を指定する場合、すべてを指定する場合は「*」のみですが、一部の要素を指定する場合、class属性かid属性を使用することになります。

この２つの属性ですが、正しく使用することでより効率の良いコーディングが可能になります。似ているように見えますが、元々どちらを使ってもいいものではなく、２つある理由がしっかりとある別物なのです。

なんとなくで使っていた人も、もう一度２つの属性の違いを正しく理解しておきましょう。

class属性とid属性の基本的な違い

class属性

「種別名」を指定するものです。
class名は同じページの中で、何度でも使うことができます。

id属性

「固有名」を指定するものです。
id名は同じページの中で１回しか使用できないという決まりがあります。

つまり、class属性は対象のものがどういった種類か、ということを表します。対して、id属性の場合対象のものに固有の名前を指定してしまうものなので、一度しか使えません。

すべてclass属性にしてしまえばいいのでは？

ここまで読んで、「なんだかややこしいし、id名は一度しか使えないのであれば、すべてclass名で記述してしまえばいいのでは？」と思った方もいるのではないでしょうか。これが、実はその通りなんです。

HTMLとCSSだけしか使用していないWebサイトの場合、わざわざid属性を使う必要はないと言っていいでしょう。

id属性は、基本的にJavascriptの要素の特定に深く関わりのあるものなので、Javascriptを使用しない場合は無理してid属性を使用する必要はありません。