How to select label for="XYZ" in CSS?
HTML:
<label for="email">{t _your_email}:</label>
CSS:
label {
display: block;
width: 156px;
cursor: pointer;
padding-right: 6px;
padding-bottom: 1px;
}
I wish to select the label based on the 'for'
attribute to make layout changes.
Solution 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.