Як вибрати мітку для = "XYZ" у CSS?

HTML:

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

CSS:

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

Я хочу вибрати мітку на основі атрибуту "для", щоб змінити макет.

Селектор буде label[for=email]таким, у CSS:

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

... або в JavaScript за допомогою DOM:

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

... або в JavaScript за допомогою jQuery:

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

Це селектор атрибутів . Зауважте, що деякі веб-переглядачі (наприклад, IE <8, наприклад) можуть не підтримувати селектори атрибутів, але є новітні. Для підтримки старих браузерів, таких як IE6 та IE7, вам, на жаль, доведеться використовувати клас (ну чи інший структурний спосіб).

(Я припускаю, що шаблон {t _your_email}заповнить поле с id="email". Якщо ні, використовуйте клас замість цього.)

Зауважте, що якщо значення атрибута, який ви вибираєте, не відповідає правилам для ідентифікатора CSS (наприклад, якщо в ньому є пробіли чи дужки, або починається з цифри тощо), вам потрібні лапки навколо значення:

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

Вони можуть бути одинарними або подвійними лапками .

Якщо вміст є змінною, його потрібно буде з'єднати з лапками. Це працювало для мене. Подобається це:

itemSelected (id: номер) {
    console.log ('мітка містить', document.querySelector ("label [for = '" + id + "']"));
}