HTML要素は複数のIDを持つことができますか？

310

IDはHTML / XHTMLページ内で一意でなければならないことを理解しています。

私の質問は、特定の要素に対して、複数のIDを割り当てることができるかどうかです。

<div id="nested_element_123 task_123"></div>

クラスを使用するだけの簡単な解決策があることに気づきました。この方法でIDを使用することに興味があります。

html  xhtml  standards-compliance 
— ウェブマット
ソース
私はHTMLのcssとjsでしばらくプログラミングしていますが、複数のクラスを使用する必要が頻繁にありますが、実際にはどちらも使用せず、複数のIDを使用する必要もありません。それでも私は少し興味があります。複数のIDが必要な場合に、このような状況でどのような状況が発生しているのか尋ねてもいいですか。
— ウィリーウォンカ2017年
まれなシナリオで、ソースHTMLにアクセスできない場合（プロキシの構築時など）、複数のIDを持つ要素をターゲットにする必要がある場合、CSSセレクター[id = "one two three" ']はその要素をターゲットにする必要があります。
— JisuKim82 2017
これは実際に引用された（そしておそらく実装された）仕様とその中のコンテキストに依存します。つまり、w3.org / TR / html5 / dom.html＃the-id-attributeと、「はい」を示す古いものですか。w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute
— Mark Schultheiss
1
@willywonkaこれは2年以上後のことだと知っていますが、この記事に出くわしましたが、今、この質問に対する答えを探していました。JS計算機を作成するためにfreecodecampのプロジェクトをやっています。彼らは出力のIDを「表示」にしてテストを実行できるようにしますが、私は2つのディスプレイ#inputと#outputを備えた関数電卓を作成しているため、＃inputディスプレイにも「display」IDが必要です。 「入力」の値に加えて値一貫性を持たせるために与えたい。
— Tara Stahler、
1
こんにちは@TaraStahlerどういたしまして。私が知る限り、<... id = "input" id = "display" ...>という表記を使用し、IDに空白（タブも含めない）を使用した場合、ブラウザは最初のブラウザのみをレンダリングするため、表記<... id = "input display" ...>はまったく無効です。ChromeコンソールでJavaScriptを試してみると、どちらの場合も「Uncaught ReferenceError：display is not defined」が返されます。最初のIDで取得した場合、最初のケースのみがオブジェクトを返します。2番目のケースは実現できません。2番目のケースでは、達成できるIDはありません。コードをリファクタリングする必要があるのでしょうか？
— willy wonka

回答:

205

いいえ。XHTML1.0仕様から

XMLでは、フラグメント識別子はタイプIDであり、要素ごとにタイプIDの単一の属性のみが存在できます。したがって、XHTML 1.0では、id属性はタイプIDとして定義されています。XHTML 1.0ドキュメントが適切に構造化されたXMLドキュメントであることを保証するために、XHTML 1.0ドキュメントは、上記の要素にフラグメント識別子を定義するときにid属性を使用する必要があります。XHTMLドキュメントをメディアタイプtext / htmlとして提供する場合に、このようなアンカーに下位互換性を確保する方法については、HTML互換性ガイドラインを参照してください。

— ティモウ
ソース
7
「フラグメント識別子はタイプIDであり、要素ごとにタイプIDの単一の属性のみが存在できます。」ここでは、単一の属性と属性は属性の値とは異なります。属性値がどのようなコンテキストであってもいけないということは、スペースで区切られているか文字で区切られているかのいずれかで複数値を想定しているとは言いません。仕様では、下位互換性のために属性値にスペース文字を含めることはできないと記載されていますが、フラグメント識別子（w3.org/TR/xhtml1/#guidelines）したがって、複数値のIDを表現するには、異なる方法で表現する必要があります
— Richeve Bebedor
2
あなたが引用するスペックに依存します。「この仕様は、複数のIDを持つ要素を除外しません...」 w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute
— Mark Schultheiss
この文が削除されているここを参照w3.org/TR/html5/dom.html#the-id-attribute
— Mark Schultheiss
さて、私はこの答えが200の賛成票を打つようにしました。大丈夫です。私は自分自身を見ている。
— KhoPhi
196

他の誰もが言ったことに反して、正しい答えはYESです

セレクタ仕様このことについて非常に明確です：

要素に複数のID属性がある場合、IDセレクターの目的のために、それらすべてをその要素のIDとして扱う必要があります。このような状況は、xml：id、DOM3 Core、XML DTD、および名前空間固有の組み合わせを使用して達成できます知識。

編集する

明確にするために：はい、XHTML要素は複数のIDを持つことができます。

<p id="foo" xml:id="bar">

ただしid、スペースで区切られたリストを使用して同じ属性に複数のIDを割り当てることはできません。

— ユーザー123444555621
ソース
7
正解です。これでハトの中に猫がいます。
— TrojanName 2011年
3
残念ながら、ここで機能するのはCSS仕様ではありません。HTML / XHTMLの場合、仕様を確認する必要があります。仕様では、各要素は最大で1つのIDを持つことができ、そのIDはページで一意である必要があることが明確に示されています（w3.org/TR/html401/struct/global）。 html＃h-7.5.2（HTML 4の場合）
— tvanfosson
9
@tvanfosson：驚いたことに、HTML4仕様では、各要素が最大で1つのIDを持つことができるとは言われていません。HTML5の仕様を見ると、それThis specification doesn't preclude an element having multiple IDs, if other mechanisms (e.g. DOM Core methods) can set an element's ID in a way that doesn't conflict with the id attribute.（CSSの仕様に対応）
— もわかります
1
id属性は1つだけ持つことができ、id属性のコンテンツの形式ではスペースを使用できません。質問のコンテキストでは、要素2に「HTML」のIDを与えると、HTML 4でもHTML 5でもこれを行うことはできません。彼が何をしようとしているのか、それはxmlidがあるとうまくいくかもしれませんが、書かれている質問からどうやってそれを得るのかわかりません。彼が示す例はHTML 4でもHTML 5でも機能せず、表示されている内容を実現するために機能させる方法はありません。
— tvanfosson 2011年
6
「1つの要素に複数のIDを割り当てることはできますか？」という質問に答えるため、私はこの回答に賛成しました。ただし、これは単なる仕様を超えていることを付け加えておきます。受け入れられた回答に示されているように、HTML / XHTML自体に関しては、属性を使用してのみ IDを割り当てることができると仕様に記載されています。明確にするために、属性（および実際には、デフォルトの名前空間外の属性）はXHTMLでは無効です。ただし、HTML5仕様から引用したように、これは決して黙って失敗することはありません。それでも、この要素にIDを追加して、一致させることができます。idxml:idxml:id="bar"bar#bar
— BoltClock
28

私の理解は常にされています：

  • IDは使い捨てで、1つの要素にのみ適用されます...

    • それぞれは、単一の要素（のみ）に固有の識別子として割り当てられます。

  • クラスは複数回使用できます...

    • したがって、これらは複数のelementに適用でき、同様にさらに異なり、1つのelementに複数のクラス（つまり、複数のクラス）が存在する可能性があります。
— ロス
ソース
18
これが質問への回答になる資格があるとは思いません。問題は、「単一の要素に複数のIDを使用できるか」ということです。
— ケビン
4
@kevinこの回答は、OPがXY問題に直面していることを想定しており、何らかの理由で、IDを介してクラスの動作を達成しようとしているユーザーを確実に助けることができます。
— Mahdi
あなたは「使い捨て」について言及しますが、それは混乱を引き起こすかもしれません。IDによって1つの要素を複数回使用することができます。あなたが取り組んでいると私が思うのは、別の解釈です。つまり、要素に1つ（そして1つだけ）のIDを使用し、その要素にのみ使用する必要があります。
— Mbotet
27

いいえ。HTML4のw3cから の定義はあなたの質問を明示的にカバーしていないようですが、nameおよびid属性の定義には、識別子にスペースが含まれていません。

IDトークンとNAMEトークンは文字（[A-Za-z]）で始まり、その後に任意の数の文字、数字（[0-9]）、ハイフン（ "-"）、アンダースコア（ "_"）を続けることができます、コロン（ "："）、およびピリオド（ "。"）。

— アクロマン
ソース
20

いいえ。すべてのDOM要素には、IDがある場合、単一の一意のIDがあります。あなたは次のようなものを使用してそれを概算することができます：

<div id='enclosing_id_123'><span id='enclosed_id_123'></span></div>

ナビゲーションを使用して、本当に欲しいものを取得します。

スタイルを適用するだけの場合は、クラス名の方が適しています。

— Tvanfosson
ソース
しかし、それは検証を壊します。
— Aupajo
3
この回答について違法なものは何ですか？誰かが反対票を説明できますか？
— tpower 2008年
19
私じゃない。:-)そして、検証を壊すことについてあなたが何を意味するのかわかりませんか？divとspanのIDが異なるため（囲みと囲み）、重複したIDの問題はありません。多分一部を読んでいない人もいます。
— tvanfosson 2008年
4
銀行強盗は違法であり、ソフトウェアの問題は決して違法ではありません。それは、古いバーチャルリアリティと実際のリアリティの問題です。:-P
— TrojanName
@BrianFentonが誰か他の人のコードをデバッグして、それが違法であるべきだと気づきました。私は、5年の刑務所は、正当な理由なしに仕様に従わなかったとして言います。
— ProblemsOfSumit
18

要素ごとに1つのIDしか持てませんが、実際には複数のクラスを持つことができます。ただし、複数のクラス属性を持たないでください。複数のクラス値を1つの属性に入れてください。

<div id="foo" class="bar baz bax">

完全に合法です。

— アンブローズチャペル
ソース
4

1つのタグに複数のIDを設定することはできませんが、一部のアプリケーションで同じように扱われるname属性と属性を持つタグを見ましたid。

— tpower
ソース
1
IEでは、IE8の前に、はい。しかし、彼らは今、標準モードでそのバグを修正しました。getElementById（）を使用して、名前とIDで大文字と小文字を区別せずに一致する要素を誤って返していました。
— scunliffe 2008年
4

いいえ、そのパスを下に移動する場合は、ネストされたDIVを使用する必要があります。さらに、可能であれば、document.getElementByID（）を実行したときに混乱が発生することを想像してください。複数のIDがある場合、どのIDを取得しますか？

少し関連するトピックとして、DIVに複数のクラスを追加できます。エリックマイヤーズの議論を参照してください、

http://meyerweb.com/eric/articles/webrev/199802a.html

— 安吉山
ソース
1
括弧内に指定したIDを取得しませんか？getElementById();何を取得するかを指定する文字列がなければ何もしませんか？！getElementById('foo');IDとしてfooを持つ要素を取得します！ここでは複数のIDは関係ありません。それでも「foo」を探します。
— RinおよびLen、
3 
Any ID assigned to a div element is unique.
However, you can assign multiple IDs "under", and not "to" a div element.
In that case, you have to represent those IDs as <span></span> IDs.

Say, you want two links in the same HTML page to point to the same div element in  the page.

The two different links
<p><a href="#exponentialEquationsCalculator">Exponential Equations</a></p>         

<p><a href="#logarithmicExpressionsCalculator"><Logarithmic Expressions</a></p>

Point to the same section of the page. 
<!-- Exponential / Logarithmic Equations Calculator -->
<div class="w3-container w3-card white w3-margin-bottom">      
   <span id="exponentialEquationsCalculator"></span>
   <span id="logarithmicEquationsCalculator"></span>
</div>
— サムダムフォーピース
ソース
2

http://www.w3.org/TR/REC-html40/struct/global.html#h-7.5.2

id属性は、一意の識別子を要素に割り当てます（これはSGMLパーサーによって検証される場合があります）。

そして

IDトークンとNAMEトークンは文字（[A-Za-z]）で始まり、その後に任意の数の文字、数字（[0-9]）、ハイフン（ "-"）、アンダースコア（ "_"）を続けることができます、コロン（ "："）、およびピリオド（ "。"）。

したがって、「id」は一意である必要があり、スペースを含めることはできません。

— アレクサンドル
ソース
1

実際にレンダリングされる内容は技術的には常にブラウザに依存するため、技術的には「はい」と言いたいです。ほとんどのブラウザは、できる限り仕様を維持しようとしますが、私が知る限り、それに対するcss仕様には何もありません。他のインタプリタが入る前にブラウザに送信される実際のhtml、css、javascriptコードを保証するだけです。

ただし、私が通常テストするすべてのブラウザーでは実際には許可されていないため、私もノーと言います。自分で確認する必要がある場合は、以下を.htmlファイルとして保存し、主要なブラウザで開きます。私がjavascript関数でテストしたすべてのブラウザーは、要素と一致しません。ただし、idタグから「hunkojunk」を削除すると、すべて正常に動作します。サンプルコード

<html>
<head>
</head>
<body>
    <p id="hunkojunk1 hunkojunk2"></p>

<script type="text/javascript">
    document.getElementById('hunkojunk2').innerHTML = "JUNK JUNK JUNK JUNK JUNK JUNK";
</script>
</body>
</html>
— ジェームズ
ソース
1

番号。

そうは言っても、あなたがそれをやめることは何もありません。ただし、さまざまなブラウザで一貫性のない動作が発生します。しないでください。要素ごとに1つのID。

要素に複数の割り当てが必要な場合は、クラスを使用します（スペースで区切る）。

— スノークラッシュ
ソース
0

それは興味深いですが、私の知る限り、答えは断固たるものです。ネストされたIDが必要な理由はわかりません。通常、同じネストされたIDを持つ別の要素と交差させるためです。あなたがしなければ意味がなく、もしそうしていてもまだ非常に小さな意味があります。

— ロバートK
ソース
1
下位互換性のために2つのIDも使用したいと思いました。たとえば、以前のバージョンではArticle-8でしたが、現在は1つの要素の2つのIDを持つnode-8と呼ばれているため、下位互換性を確保するための回避策をコーディングできません。両方のIDは、一意の識別子として残ります。
— FLY
0

私はこれが1歳であることを知っていますが、私自身もこれに興味を持っていたので、他の人もここにいると思います。他の人が私の前に言ったように、単純な答えはノーです。1つの要素に複数のIDを含めることはできません。また、1つのIDをページで複数回使用することはできません。試してみると、うまくいかないことがわかります。

2つの異なる要素での同じIDの使用に関するtvanfossonの回答に応じて。私が知っている限り、IDは別のタグに添付されているかどうかに関係なく、ページ内で1回だけ使用できます。

定義により、IDを必要とする要素は一意である必要がありますが、2つのIDが必要な場合は、実際には一意ではなく、代わりにクラスが必要です。

— テイラー
ソース
1
しかし、tvanfossonの回答を読んだ場合、2つのIDは明らかに異なります "enclosing_id_123"！= "enclosed_id_123"
— Ben
0

クラスはこれのために特別に作られています、これはあなたが理解できるコードです 

<html>
<head>
    <style type="text/css">
     .personal{
            height:100px;
            width: 100px;   

        }
    .fam{
            border: 2px solid #ccc;
        }   
    .x{
            background-color:#ccc;
        }   

    </style>
</head>
<body>

    <div class="personal fam x"></div>

</body> 
</html>
-4

私はあなたが2つのIDを持つことができるとは思いませんが、それは可能であるべきです。同じIDを2回使用するのは別のケースです... 2人が同じパスポートを使用するようなものです。しかし一人で複数のパスポートを持つことができます...私は一人の従業員がいくつかの機能を持つことができる状況があるのでこれを探しに来ました。id = "sysadm teamcoordinator"を持つ "sysadm"と "team coordinator"が他のページから参照できるようにして、employees.html＃sysadmとemployees.html＃teamcoordinatorが同じ場所につながるようにします...ある日誰かそうでなければ、sysadmがsysadmのままでチームコーディネーター機能を引き継ぐ可能性があります...その後、employees.htmlページのIDを変更するだけでよいのです...

— オレレイダーヨハンセン
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.