HTMLの要素によく付いている属性としてclass属性とid属性の２つがあります。コーディングを学んで間もないうちはこれら２つの属性はどちらもスタイルシートで場所を指定するセレクタとして使用しているので、両者をどう使い分けるものなのかがよく分からないかもしれません。ここでは、この２つの属性の違いについてお話させていただきます。
コンテンツ
class属性とid属性の違い
classとidの大きな違いは次の２つです。
- 同じ名前のidはページ内に１回だけしか指定できないがclass名は複数指定できる。
- id属性の方がスタイルシートの優先順位が高い。
idで指定したデザインとclassで指定したデザインが同じ要素に適用されていて、idとclassがそれぞれ別の値だった場合、idセレクタで指定されたデザインの方が優先されるというルールがあります。
※スタイルシートの優先順位についてはこちらも参照してみてください。
この２つがidとclassの違いになります。
どんなときにid属性は使うのか？
１つのページに同じ名前が１つだけという制限のあるid属性ですが、どんなときに使うことになるのでしょうか。少しだけ事例を紹介します。
ページ内リンクで使用するとき
リンク先が他のページではなくて、ページ内のどこか他の場所に指定したいときはid属性を入れます。こんな感じですね。
<a href="https://example.com/sample#link">リンクテキスト</a>
上記はhttps://example.com/というサイトのsampleというページ内にあるlinkというid名がある場所へのリンクです。もしもidではなくてclassで指定したとして、同じlinkという名前がページ内に複数あったとしら、どこにジャンプするのか分からなくて困りますよね。だから、ページ内ジャンプで利用するときはid名で指定します。
スタイルシートではなくJavaScriptなどで使われている
classやidといった属性を利用しているのはスタイルシートだけではありません。JavaScriptなどはあまり詳しくありませんが、これら他のプログラムで使用する目的でid属性を入れることもあります。
まとめ｜基本的にclass属性を使いましょう
スタイルシートでclassだけを使っていて困ることというのは基本的にありません。同じid属性はページ内に１回しか登場させられないという制限がありますので、基本的にclass属性を使っていけば大丈夫です。
