web-dev-qa-db-ja.com

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

私は、IDはHTML/XHTMLページ内でユニークでなければならないことを理解しています。

私の質問は、与えられた要素に対して、私はそれに複数のIDを割り当てることができますか？

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

クラスを使用するだけで簡単な解決策があることがわかりました。私はこのようにIDを使うことに興味があります。

htmlxhtmlstandards-compliance
284
webmat

いいえから XHTML 1.0 Spec

XMLでは、フラグメント識別子はID型であり、要素ごとにID型の属性は1つしか存在できません。したがって、XHTML 1.0では、id属性はID型として定義されています。 XHTML 1.0文書が構造化されたXML文書であることを保証するために、XHTML 1.0文書は上記の要素にフラグメント識別子を定義するときにid属性を使わなければなりません。 XHTMLドキュメントをメディアタイプtext/htmlとして提供するときに、そのようなアンカーが下位互換性を持つようにするための情報については、HTML互換性ガイドラインを参照してください。

187
timmow

他の人が言ったこととは反対に、正しい答えはYESです。

Selectors spec はこれについて非常に明確です。

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

編集

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

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

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

178
user123444555621

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

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

    • それぞれが1つの要素のみに対する一意の識別子と見なされるです。

  • クラスを使うことができます複数回 ...

    • したがって、それらは複数の要素に適用することができ、同様にさらに異なる場合は、要素ごとに複数のクラス（つまり複数のクラス）が存在する可能性があります。
27
Ross

いいえ。HTML 4の w3cからの定義 はあなたの質問を明示的に網羅していないようですが、 nameおよびid属性の定義 は識別子に空白がないことを示します。

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

26
acrosman

いいえ。すべてのDOM要素にIDがある場合は、一意のIDが1つあります。次のようにして近似できます。

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

そしてナビゲーションを使ってあなたが本当に欲しいものを手に入れましょう。

単にスタイルを適用しようとしているのであれば、クラス名が優れています。

17
tvanfosson

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

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

完全に合法です。

16
AmbroseChapel

いいえ、その方向へ進みたい場合は入れ子になったDIVを使用する必要があります。それに加えて、たとえできたとしても、document.getElementByID（）を実行したときに生じる混乱を想像してください。複数のIDがある場合、どのIDを取得するのですか？

少し関連のあるトピックでは、DIVに複数のクラスを追加できます。 Eric Myersのディスカッションを参照してください。

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

4
Anjisan

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

3
tpower

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

Id属性は要素にユニークな識別子を割り当てます（これはSGMLパーサーによって検証されるかもしれません）。

そして

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

そのため、 "id"は一意である必要があり、スペースを含めることはできません。

2
Alexandr

いいえ.

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

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

1
Snowcrash

私はこれが1歳であることを知っています、しかし、私はこれについて私自身に興味がありました、そして私は他の人がここに彼らの道を見つけると確信しています。他の人が私の前に言ったように、簡単な答えはノーです。要素は複数のIDを持つことはできず、IDはページ内で複数回使用することはできません。試してみると、がうまくいかないことがわかります。

2つの異なる要素で同じIDを使用しているというtvanfossonの回答に答えて。私が知っている限りでは、IDは別のタグに付けられているかどうかにかかわらず、ページ内で1回しか使用できません。

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

0
Taylor

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

0
Robert K

実際にレンダリングされるのは技術的には常にブラウザに依存するため、私は技術的にはいと言いたいのです。ほとんどのブラウザは可能な限り最高の仕様を維持しようとしていますし、私の知る限りでは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>
0
James

いや.

https://www.w3.org/TR/2011/WD-html5-20110525/elements.html#the-id-attribute

値にスペース文字を含めることはできません。

id="a b" < - その中の空白文字を見つけますVaLuE。

とは言っても、は複数のIDをスタイルすることができます。しかし、あなたがスペックに従っているなら、答えはノーです。

0
corysimmons
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>
0
Samdom For Peace

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

<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>
0
user3266067