CSSで= "XYZ"のラベルを選択する方法

Question

HTML：

<label for="email">{t _your_email}:</label>

CSS：

label {
  display: block;
  width: 156px;
  cursor: pointer;
  padding-right: 6px;
  padding-bottom: 1px;
}

メールラベル用の新しいCSSを作成したいのですが、それほど広くはありません。

Answer 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... */
}

それらは 一重引用符または二重引用符 です。