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

StackOverflow https://stackoverflow.com/questions/544010

  •  23-08-2019
  •  | 
  •  

質問

違いは何ですか <div class=""> そして <div id=""> CSSに関して言えば？使っても大丈夫ですか？ <div id="">?

さまざまな開発者がこれを両方の方法で行っているのを見てきましたが、私は独学なので、まったく理解できませんでした。

役に立ちましたか？

解決

ids 一意である必要がありますが、 class 多くのことに応用できます。CSSでは、 idのように見える #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 カードが異なるものとみなされます。どの学生がキャンパスが同じ学生 ID カードです。しかし、多くの学生のみなさまと共有少なくとも一つの クラス ます。

大丈夫で複数の学生が一 クラス タイトルなどの生物学です。そんな入れる複数の学生が一生 ID.

を与える場合は ルール の学校がインターホンシステムで来ることができるアクセス ルール へ クラス:

"明日は、すべての学生に赤いシャツに生物学のクラスです。"

.Biology {
  color: red;
}

やきルールを特定の学生を呼び出し独自の ID:

"ジョナサン-Sampsonが着用するユーザー評価されています。

#JonathanSampson {
  color: green;
}

この場合、ジョナサン-Sampsonは二つのコマンド:一生徒としての生物学のクラスは、別のとして直接的に必要です。でジョナサンと言われた、直接のid属性に緑のシャツ、彼を無視し、申請し、承認を受けた機関に赤です。

により特定のセレクタです。

クラス対IDを使用するには、

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

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

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

クラスは多くの要素に適用されることがあります。

時には、それはIDを使用することをお勧めします。

ページで、あなたは通常、1つのフッタ、ヘッダを1つ持っている...

次に、フッタは、IDとDIVにしてもよい。

  

とまだクラスを持っている。

A クラス 用いるべきである複数の要素がたい同じスタイリングします。An ID うための独自の要素になります。この チュートリアル.

を確認してください、 W3C標準 ただ、厳しいconformistれた場合、またはホームページへ 検証済み のです。

Idはユニークです。授業のない.要素も多い。また授業できる動的に追加-削除される要素になります。

どこでも利用できるIDを使用できるクラスです。の逆は成り立ちません。

条約のように利用Idのページを要素の各ページのように"navbar"や"メニュー"）の授業をありがこの条約の大きな差ます。

その違いは、フォームの入力要素に <label> 要素の参照によってIDばなければなりませんでしIdを使用すのであれば利用 <label>.はアクセスもすっきに使用します。

年るようになってIdが好ましい簡単アクセス可能Javascript(getElementById).最近の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>

この例では、ヘッダおよびコンテンツのセクションでは、＃ヘッダーと#content介しスタイルすることができます。コンテンツの各セクションは、#content .SECTIONを介して共通のスタイルを適用することができます。ただ、キックのために、私は真ん中のセクションのための「特別な」クラスを追加しました。あなたは特別なスタイリングを持つように特定のセクションを望んでいたとします。これは。特殊クラスで達成することができる、まだセクションはまだ#content .SECTIONから一般的なスタイルを継承します。

私はJavaScriptやCSSの開発を行うと、私は通常、アクセスにIDを使用/非常に特定のHTML要素を操作して、私は要素の広範なにスタイルを適用/アクセスにクラスを使用します。

CSSは、オブジェクト指向です。 IDは、インスタンスを言い、クラスは、クラスを述べています。

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を使用して見つけることができます。ただ、知っているサスする / <のhref = "HTTPS：/ /en.wikipedia.org/wiki/Sass_(stylesheet_language）」のrel = "nofollowを"> SCSS の世界のこのようなものを手に、ネストされたIDが当たり前になってきています。

それは、パフォーマンスと優先順位をセレクタに来るとき、

最後に、IDが勝つ傾向にあります。これは全体の他の主題である。

CSSを適用する場合、クラスにそれを適用し、IDにすることができます限り避けるようにしてください。 IDのみエレメントをフェッチまたは結合の任意のイベントのためにはJavaScriptで使用する必要があります。

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

時々、結合事象のためのクラスを使用する必要があります。このような場合には、CSSを適用するために使用されているクラスを回避しようと、むしろ対応するCSSを持っていない新しいクラスを追加します。これは、あなたが任意のクラスのためのCSSを変更したり、任意の要素のためにすべて一緒にCSSクラス名を変更する必要があるときに助けになるだろう。

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

クラスは、あなたがこの質問への答えを表しDIVのCSSクラスを有していてもよく、たとえば、ディスプレイの特定のタイプを参照するために使用されます。多くの答えがあるだろうとして、複数のdivは同じスタイリングを必要とする、あなたは、クラスを使用することになります。

idは、単一の要素を指し、例えば右の関連セクションは他の場所で再利用されない、それに特定のスタイルしている可能性があり、それがIDを使用することになります。

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

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

先進の開発 idsまでは基本的にはJavaScriptを使用しています。

繰り返し、目的 クラスes越しをお手軽に反して 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 言語です。

1）divのIDが再利用可能ではなく、DIVクラスは複数の要素に追加することができながら、HTMLのみの一つの要素に適用されるべきである。

両方が同じ要素に適用され、競合様式を有する、IDのスタイルが適用される場合は、

2）IDが大きな重要性を有しています。

3）スタイルの要素は常に入れての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>   ここでは背景が青色になります。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top