css - ページ上の一意の HTML ID

Question

私はしばしばフォームに次のようなものを持っていました:

input#userid{
    left : 10px;
    top:130px;
    width : 180px;
}

label#userid{
    left : 10px;
    top:156px;
}

ページ上の ID は一意である必要があることを認識しており、上記は常に一意であると考えてきました。しかし今、「label for」について読んでいて、HTML の精神において自分の ID が本当に一意であるかどうか疑問に思っています。

Answer 1

ブラウザーの世界では、HTML に同じ ID を持つ 2 つの要素があると仮定すると、おそらく機能します。ただし、その HTML は検証されず、さまざまな種類の HTML プロセッサが壊れる可能性があり、ブラウザーや doctype によっては機能する場合と機能しない場合があります。html の一意の ID 値も参照してください。

Answer 2

いいえ。ID は、すべての要素にわたってドキュメント内で一意である必要があります。はい、一意でない ID を使用することはできますが、それはお勧めできません。

経験則として、2 つの要素で同じ ID を使用したい場合は、代わりにクラスを使用することを検討してください。上記の特定の例では、入力フィールドuseridをクラスと ID の両方として指定し、それをラベルのクラスとしてのみ使用できます。

または、CSS 属性セレクターを使用して、CSS のラベルをターゲットにすることもできます。

input#userid{
  left: 10px;
  top 130px;
  width: 180px;
}

label[for="userid"]{
  left: 10px;
  top: 156px;
}

...forラベルに属性を割り当てたと仮定します。