How to select label for="XYZ" in CSS?

Question

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

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

I wish to select the label based on the 'for' attribute to make layout changes.

Creighton

Answer 1

The selector would be label[for=email], so in CSS:

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

...or in JavaScript using the DOM:

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

...or in JavaScript using jQuery:

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

It's an attribute selector. Note that some browsers (versions of IE < 8, for instance) may not support attribute selectors, but more recent ones do. To support older browsers like IE6 and IE7, you'd have to use a class (well, or some other structural way), sadly.

(I'm assuming that the template {t _your_email} will fill in a field with id="email". If not, use a class instead.)

Note that if the value of the attribute you're selecting doesn't fit the rules for a CSS identifier (for instance, if it has spaces or brackets in it, or starts with a digit, etc.), you need quotes around the value:

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

They can be single or double quotes.

Unsupportable

I'll change it to a class for ie7 using conditiona comments then, thanks for the great answer! – Creighton

And now the jQuery docs say you don't need the quotes for single words, so it matches CSS again (in this regard). – Unsupportable

To avoid confusion to everyone (I just had this myself), there must be no space between label and [for=email] – Lecher

IE8 does support attribute selectors as long as the page has a <!DOCTYPE> declared. – Aurie

@ilinamorato: I didn't say it didn't. I said versions < 8 may not. – Unsupportable

@T.J.Crowder I understand. I was only clarifying the point as I just tested it. – Aurie

Update for modern JavaScript: document.querySelector('label[for="email"]') or document.querySelectorAll('label[for="email"]'). – Hannah

@Hannah - querySelector is literally the second code block above. – Unsupportable

@T.J.Crowder, Manngo's example has quotes around the attribute value while your answer does not. At least for me, in a JSDom environment, it only works with quotes. Thanks Manngo! edit I see you call out the potential need for quotes at the bottom of your answer. I missed that [/edit] – Fomalhaut

@Fomalhaut - See the paragraph in the answer saying "Note that if the value of the attribute you're selecting doesn't fit the rules for a CSS identifier..." and providing a spec link for when you do and don't need them. (Or always use them if you prefer.) – Unsupportable

Answer 2

If the label immediately follows a specified input element:

input#example + label { ... }
input:checked + label { ... }

Tyler

Answer 3

If the content is a variable, it will be necessary to concatenate it with quotation marks. It worked for me. Like this:

itemSelected(id: number){
    console.log('label contains', document.querySelector("label[for='" + id + "']"));
}

Crossopterygian