web-dev-qa-db-ja.com

IDとクラスの違いは何ですか？

CSSに関しては、<div class="">と<div id="">の違いは何ですか？ <div id="">を使っても大丈夫ですか？

私は、さまざまな開発者が両方の方法でこれを行っているのを見ています、そして私は独学でいるので、私は本当にそれを考え出したことがありません。

htmlcssclassid
207
johnnietheblack

idsは多くのものに適用できるので、classは一意でなければなりません。 CSSでは、idsは#elementIDのように見え、class要素は.someClassのように見えます

一般的に、特定の要素を参照したいときはidを、よく似たものがたくさんあるときはclassを使用してください。例えば、一般的なid要素はheader、footer、sidebarのようなものです。一般的なclass要素は、highlightやexternal-linkのようなものです。

カスケードを読み、さまざまなセレクターに割り当てられた優先順位を理解することをお勧めします。 http://www.w3.org/TR/CSS2/cascade.html

ただし、理解すべき最も基本的な優先順位は、idセレクタがclassセレクタよりも優先されることです。あなたがこれを持っていたならば：

<p id="intro" class="foo">Hello!</p>

そして：

#intro { color: red }
.foo { color: blue }

idセレクターがclassセレクターよりも優先されるため、テキストは赤になります。

305
Tyson

おそらく類似性が違いを理解するのに役立ちます。

<student id="JonathanSampson" class="Biology Calculus" />
<student id="MarySmith" class="Biology Networking" />

学生証IDは区別されます。キャンパス内に2人の学生が同じ学生IDカードを持つことはできません。ただし、多くの生徒は少なくとも1つのクラスを互いに共有できます。

複数の学生を1つのClassのように分類しても問題ありません。たとえば、Biologyです。しかし、複数の生徒を一人の生徒の下に置くことは許されませんID。

学校のインターホンでルールをつけるときは、ルールをつけることができます。 aクラス：

「明日、すべての学生は生物学クラスに赤いシャツを着ることになっています。」

.Biology {
  color: red;
}

あるいは、特定の生徒に一意のIDを呼び出すことで、規則を与えることができます。

「ジョナサンサンプソンは、明日は緑色のシャツを着ます。」

#JonathanSampson {
  color: green;
}

この場合、Jonathan Sampsonは2つのコマンドを受け取ります。1つはBiologyクラスの学生として、もう1つは直接要件としてです。 Jonathanは、id属性を介して緑色のシャツを着るように直接言われたので、彼は以前の赤いシャツを着る要求を無視します。

より具体的なセレクターが勝ちます。

157
Sampson

クラスとIDの関係

両者の単純な違いは、クラスはページ上で繰り返し使用できますが、IDはページごとに1回しか使用できないことです。したがって、1つのメインコンテンツセクションしかないので、ページ上のメインコンテンツをマークアップしているdiv要素にIDを使用するのが適切です。対照的に、テーブル上に交互の行の色を設定するには、クラスを使用する必要があります。これは、定義上、2回以上使用されるためです。

IDは非常に強力なツールです。 IDを持つ要素は、何らかの方法で要素またはその内容を操作するJavaScriptの一部となる可能性があります。 ID属性は内部リンクのターゲットとして使用でき、アンカータグを名前属性に置き換えます。最後に、あなたがあなたのIDを明確かつ論理的にするならば、それらは文書内の一種の「自己文書化」として役立つことができます。たとえば、ブロックの開始タグのIDが "main"、 "header"、 "footer"の場合、コードのブロックにメインコンテンツが含まれることを示すブロックの前にコメントを追加する必要は必ずしもありません。 」など.

16
Konstantin Tarkus

IDはページ全体で一意である必要があります。

クラスは多くの要素に適用できます。

場合によっては、IDを使用することをお勧めします。

ページには、通常1つのフッター、1つのヘッダーがあります。

それからフッターはidを持つdivに入るかもしれません

<div id = "footer" class = "...">

そしてまだクラスがあります

7
Luc M

ACLASSは、同じスタイルを設定したい複数の要素に使用する必要があります。 IDは一意の要素を表します。この チュートリアル をご覧ください。

厳密に準拠させたい場合、またはページを標準に 検証 させたい場合は、 W3C標準 を参照してください。

6
jjclarkson

CSSはオブジェクト指向です。 IDはインスタンス、クラスはクラスを表します。

5
annakata

IDは一意です。クラスは違います。要素は複数のクラスを持つこともできます。また、クラスを要素に動的に追加および削除することもできます。

どこでもあなたが代わりにクラスを使うことができるIDを使うことができます。その逆は真実ではありません。

規則は、すべてのページにあるページ要素（ "navbar"や "menu"など）とそれ以外のクラスにはクラスを使用するように思われますが、これは単なる慣例であり、使用法には大きな違いがあります。

もう1つの違いは、フォーム入力要素の場合、<label>要素はフィールドをIDで参照するため、<label>を使用する場合はIDを使用する必要があります。アクセシビリティのものであり、あなたは本当にそれを使うべきです。

IDによる削除は、JavaScript（getElementById）で簡単にアクセスできるため、長年行われていました。 jQueryと他のJavascriptフレームワークの出現により、これは今ではほとんど問題になりません。

5
cletus

クラスはカテゴリのようなものです。多くのHTML要素は1つのクラスに属することができ、1つのHTML要素は複数のクラスを持つことができます。クラスは、一般的なスタイルまたは複数のHTML要素に適用できるスタイルを適用するために使用されます。

IDは識別子です。それらはユニークです。他のユーザーが同じIDを持つことはできません。 IDは、HTML要素に固有のスタイルを適用するために使用されます。

私はこのようにIDとクラスを使います。

<div id="header">
  <h1>I am a header!</h1>
  <p>I am subtext for a header!</p>
</div>
<div id="content">
  <div class="section">
    <p>I am a section!</p>
  </div>
  <div class="section special">
    <p>I am a section!</p>
  </div>
  <div class="section">
    <p>I am a section!</p>
  </div>
</div>

この例では、ヘッダーセクションとコンテンツセクションは#headerと#contentを使用してスタイルを設定できます。 #content .sectionを使用して、コンテンツの各セクションに共通のスタイルを適用できます。キックのためだけに、私は真ん中のセクションに "特別な"クラスを追加しました。特定のセクションに特別なスタイルを設定したいとします。これは.specialクラスで実現できますが、それでもこのセクションは#content .sectionから共通のスタイルを継承します。

私がJavaScriptやCSSの開発をするとき、私はたいていIDを使って非常に特定のHTML要素にアクセスしたり操作したりします、そして私はクラスを使って幅広い要素にスタイルをアクセスしたり適用します。

5
JR.

CSSを適用するときは、それをクラスに適用し、できる限りIDになるべく避けてください。 IDは、要素を取得するため、または任意のイベントバインディングのためにJavaScriptでのみ使用されるべきです。

クラスはCSSを適用するために使われるべきです。

イベントバインディングにクラスを使用しなければならないことがあります。そのような場合は、CSSの適用に使用されているクラスを避けて、対応するCSSを持たない新しいクラスを追加してください。これは、CSSをクラスに変更したり、CSSクラス名をすべての要素に合わせて変更したりする必要がある場合に役立ちます。

2
Sandeep Choudhary

CSSセレクタスペースは、実際には条件付きIDスタイルを許可します。

h1#my-id {color:red}
p#my-id {color:blue}

期待どおりにレンダリングされます。なぜあなたはこれをしますか？動的にIDが生成されることもあります。その他の用途は、高レベルのID割り当てに基づいてタイトルの表示方法を変えることです。

body#list-page #title {font-size:56px}
body#detail-page #title {font-size:24px}

個人的には、私はもっと長いクラス名セレクタを好みます。

body#list-page .title-block > h1 {font-size:56px}

ネストしたIDを使って扱いを区別するのはちょっとひねくれていると思います。 Sass / SCSS の世界の開発者として、ネストしたIDが標準になりつつあります。

最後に、セレクターのパフォーマンスと優先順位に関しては、IDが勝つ傾向があります。これは他の話題です。

2
duggi

クラスは要素のグループにあなたのスタイルを適用するためのものです。 IDスタイルは、そのIDを持つ要素だけに適用されます（必ず1つだけ）。通常はクラスを使用しますが、一回限りの場合はIDを使用することもできます（または単に要素にスタイルを固定することもできます）。

0
Adam A

任意の要素はクラスまたはIDを持つことができます。

クラスは特定の種類の表示を参照するために使用されます。たとえば、この質問に対する答えを表すdivのcssクラスがあるとします。多くの答えがあるので、複数のdivが同じスタイルを必要とし、あなたはクラスを使うでしょう。

Idは単一の要素のみを表します。例えば、右側の関連セクションは他の場所では再利用されずにそれに固有のスタイルを持っているかもしれません。

技術的には、そのすべてにクラスを使用することも、それらを論理的に分割することもできます。ただし、idを複数の要素に再利用することはできません。

0
ermau

高度な開発idでは、基本的にJavaScriptを使うことができます。

繰り返し可能な目的のために、classesはidsとは反対に便利です。

以下は上記の式を示す例です。

<div id="box" class="box bg-color-red">this is a box</div>
<div id="box1" class="box bg-color-red">this is a box</div>

boxとbox1は2つの異なる<div>要素ですが、両方にboxクラスとbg-color-redクラスを適用できます。

概念は OOP 言語での継承です。

0
nuke_infer

1）div idは再利用できず、HTMLの1つの要素にのみ適用する必要がありますが、divクラスは複数の要素に追加できます。

2）idが同じ要素に適用されていてスタイルが矛盾している場合、idのスタイルが適用されます。

3）style要素は常にaをつけることでdivクラスを参照します。 div idクラスが名前の前に＃（ハッシュ）を入れることによって参照されている間、名前の前に（ドット）を付けます。

4）例： -

<style>宣言内のクラス - .red-background { background-color: red; }

<style>宣言内のid - #blue-background {background-color: blue;}

<div class="red-background" id="blue-background">Hello</div>ここで背景は青い色になります

0
MERLIN THOMAS