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

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

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

idsclass多くのものに適用できるような一意でなければなりません。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。

おそらくアナロジーは違いを理解するのに役立ちます：

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

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

Biologyなど、1つのクラスタイトルの下に複数の学生を配置することは問題ありません。ただし、複数の学生を1つの学生IDの下に置くことは決して許容されません。

与えた場合のルールを学校インターホンシステム上で、あなたが与えることができますルールのクラス：

「明日、すべての学生は生物学のクラスに赤いシャツを着る予定です。」

.Biology {
  color: red;
}

または、固有のIDを呼び出して、特定の生徒にルールを与えることもできます。

「ジョナサンサンプソンは明日、緑のシャツを着ることになっています。」

#JonathanSampson {
  color: green;
}

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

より具体的なセレクターが優先されます。

IDとクラスのどちらを使用するか

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

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

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

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

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

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

次に、フッターはidを持つdivに入る可能性があります

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

まだクラスがあります

CLASSはあなたがのために同じスタイリングをしたい複数の要素のために使用すべきです。IDはユニークな要素のためでなければなりません。このチュートリアルを参照してください。

厳密に準拠したい場合、またはページを標準に準拠して検証する場合は、W3C標準を参照する必要があります。

IDは一意です。クラスはそうではありません。要素は複数のクラスを持つこともできます。また、クラスは要素に対して動的に追加および削除できます。

IDを使用できる場所ならどこでも、代わりにクラスを使用できます。逆は当てはまりません。

慣例では、すべてのページにあるページ要素（「navbar」や「menu」など）のIDとその他すべてのクラスにIDを使用するようですが、これは単なる慣例であり、使用方法にはさまざまな違いがあります。

もう1つの違いは、フォーム入力要素の場合、<label>要素はIDでフィールドを参照するため、を使用する場合はIDを使用する必要があるということです<label>。アクセシビリティの問題であり、実際に使用する必要があります。

何年もの間、Javascript（getElementById）で簡単にアクセスできるため、IDも好まれました。jQueryやその他のJavaScriptフレームワークの登場により、これは今ではほとんど問題になりません。

クラスはカテゴリのようなものです。多くのHTML要素はクラスに属することができ、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要素にアクセス/操作し、クラスを使用して幅広い要素にスタイルをアクセス/適用します。

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

CSSを適用する場合、それをクラスに適用し、IDにできる限り回避するようにしてください。IDは、要素をフェッチするため、またはイベントバインディングのためにJavaScriptでのみ使用する必要があります。

CSSを適用するには、クラスを使用する必要があります。

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

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が勝つ傾向があります。これはまったく別の主題です。

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

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

idは単一の要素のみを参照します。たとえば、右側の関連セクションは、他の場所で再利用されない、固有のスタイルを持つ場合があります。idを使用します。

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

クラスは、要素のグループにスタイルを適用するためのものです。IDスタイルは、そのIDを持つ要素のみに適用されます（1つだけでなければなりません）。通常はクラスを使用しますが、1回限りの場合はIDを使用できます（またはスタイルを要素に直接貼り付けます）。

高度な開発IDでは、基本的にJavaScriptを使用できます。

反復可能な目的のために、クラス esは、一意であるはずのid sとは逆に便利です。

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

<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、box12つの異なる<div>要素がここに表示されますが、両方にboxとbg-color-redクラスを適用できます。

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

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

2）両方が同じ要素に適用され、スタイルが競合している場合、IDの重要性が高くなります。IDのスタイルが適用されます。

3）スタイル要素は常に。（ドット）は名前の前に、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> ここで背景は青色になります

idおよびclass2つのグローバル/標準HTML属性です（以下のグローバル属性は、任意のHTML要素で使用できます）。

class 要素の1つ以上のクラス名を指定します（スタイルシートのクラスを参照します）

id 要素の一意のIDを指定します

id属性は、ドキュメント全体の一意の識別子を要素に与えます。class属性は、同様の要素を分類する方法を提供します。

id属性値はHTMLページ全体で一意である必要があります。同じ属性を適用したい場合は、class属性を再利用できます。

クラスは、共通の属性を持つ複数の要素に使用されます。たとえば、pタグとbodyタグの両方に同じ色とフォントが必要な場合は、クラス属性またはディビジョン自体を使用します。

一方、Idは、単一の要素の属性を強調表示するために使用され、特定の要素に対してのみ使用されます。たとえば、ページ全体で他の要素で繰り返さないようにする属性がいくつかあるh1タグがあります。

要素でclassとidの両方を使用する場合、* idはクラスの属性を上書きすることに注意してください。* idは単一の要素専用です。

以下の例を参照してください

<html>
<head>
<style>
    #html_id{
        color:aqua;
        background-color: black;

    }
    .html_class{
        color:burlywood;
        background-color: brown;
    }
</style>

   </head>
    <body>
<p  class="html_class">Lorem ipsum dolor sit amet consectetur adipisicing 
   elit. 
    Perspiciatis a dicta qui unde veritatis cupiditate ullam quibusdam! 
     Mollitia enim, 
    nulla totam deserunt ex nihil quod, eaque, sed facilis quos iste.</p>
    </body>
   </html>

出力を生成します

出力