[初心者向け徹底解説]〜CSSセレクタ(idセレクタとclassセレクタの違いとは??)

CSS

idセレクタとclassセレクタの違いを簡単解説

idセレクタとclassセレクタの違いとは

CSSを学んでいくと序盤のほうでセレクタという言葉が出てきます。

HTMLで作成した要素にスタイルを適用させる時に必要な式がCSSセレクタでしたね。

CSSセレクタは色々な種類があるけど、その中でも最も序盤に登場して、意味が分かりにくいもがあります。

それがidセレクタとclassセレクタです。

理解してみたら何のことはないんですが、最初はとにかく意味が分かりにくいものです。

ここでは、

idセレクタとclassセレクタの違いがいまいちよく分からないな・・・って方を対象にを沢山の図例を使って分かりやすく解説していきます。

CSSセレクタ〜idセレクタとclassセレクタの違いとは???

最初に結論からいうと、idセレクタとclassセレクタの違いはたった1つだけです。

同一ページ内で同じ名前のid名、class名を使うことができるかできないか。

idセレクタの場合は同一ページ内では同じ名前のid名を使用できません。

逆に言いかえると、id名さえ変えたら同じページでも問題なく使えます。

一方、classセレクタは同じ名前のclass名を同一ページ内で何回でも使えます。

まとめると↓↓↓

idセレクタとclassセレクタの違い

違いはたったこれだけです。

色々なサイトを見て頭が混乱するのは、

idセレクタは1ページ内で1回しか使えない」って強調されているからです。

よく読むと、id名を変えたら使えると書かれてるんですが、最初に登場するのが大抵は上の説明だからです。

大事なことなのでもう一度いいます。

 

idセレクタは同一ページ内では同じ名前のid名を使用できません。

classセレクタは同じ名前のclass名を同一ページ内で何回でも使えます。

まとめ

idセレクタとclassセレクタの違いを解説してきましたが、何となくイメージをつかめたでしょうか?

どのような場面で使われるかは、実際の例を見てもらったほうが理解しやすかもしれません。

下のリンクでは実際の使い方を解説していますので、良かったら参考にしてみてください。

[初心者向け徹底解説]〜CSSセレクタ〜idセレクタとclassセレクタの使い方
idセレクタとclassセレクタの基本的な使い方 HTMLやCSSを勉強し始めた時、序盤で登場するのがidセレクタとclassセレクタになります。 いわば基本中の基本のセレクタですが、ここではidセレクタとclassセレクタ...

コメント

タイトルとURLをコピーしました