CSSでラベル「XYZ」を選択するにはどうすればいいですか? 質問する

CSSでラベル「XYZ」を選択するにはどうすればいいですか? 質問する

label {
  display: block;
  width: 156px;
  cursor: pointer;
  padding-right: 6px;
  padding-bottom: 1px;
}
<label for="email">{t _your_email}:</label>

属性に基づいてラベルを選択し、'for'レイアウトを変更したいと思います。

ベストアンサー1

セレクターは なのでlabel[for=email]、CSS では次のようになります。

label[for=email]
{
    /* ...definitions here... */
}

...または DOM を使用する JavaScript の場合:

var element = document.querySelector("label[for=email]");

または、jQuery を使用した JavaScript で:

var element = $("label[for=email]");

それは属性セレクタ一部のブラウザ (たとえば、IE のバージョン 8 未満) は属性セレクターをサポートしていない可能性がありますが、最近のブラウザはサポートしています。IE6 や IE7 などの古いブラウザをサポートするには、残念ながらクラス (または他の構造的な方法) を使用する必要があります。

(テンプレートが{t _your_email}フィールドに を入力することを想定していますid="email"。そうでない場合は、代わりに クラスを使用します。)

選択した属性の値が、CSS 識別子(たとえば、スペースや括弧が含まれている場合や、数字で始まっている場合など)、値を引用符で囲む必要があります。

label[for="field[]"]
{
    /* ...definitions here... */
}

彼らは一重引用符または二重引用符を使用できます

おすすめ記事