Select Label Using CSS Selector

How to select label for=XYZ in CSS?

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.

How to select label for checked checkbox using CSS?

You only need to change the HTML and selector. In CSS the label doesn't know if the checkbox is checked so you have to turn it around.

input.chkCountry[type="checkbox"]:checked + label  {color:green;}
/*input:checked + label  {color:green;} /* Short selector */

<ul class="chkbox">
  <li>
    <input type="checkbox" class="chkCountry" id="chkCC_AF" name="chk_AF" value="AF" checked="checked">   
    <label class="lblCountry" for="chkCC_AF">Afghanistan</label>
  </li>
  <li>
    <input type="checkbox" class="chkCountry" id="chkCC_AL" name="chk_AL" value="AL">
    <label class="lblCountry" for="chkCC_AL">Albania</label>
  </li>
  <li>
    <input type="checkbox" class="chkCountry" id="chkCC_DZ" name="chk_DZ" value="DZ">
    <label class="lblCountry" for="chkCC_DZ">Algeria</label>
  </li>
    <li><input type="checkbox" class="chkCountry" id="chkCC_AS" name="chk_AS" value="AS">
    <label class="lblCountry" for="chkCC_AS">American Samoa</label>
  </li>
</ul>

Targeting html label text with a css selector

Unfortunately the only CSS properties that allow you to style pure text are mostly related to the font manipulation, color and letter spacing.

You have a couple of best practice solutions to achieve what you want.

• You can wrap each text within a <span>
• or you could use a much cleaner alternative which is by using the <label> tags to wrap the actual labels and use the for attribute on the <label> element to relate it to its specific input field.

For the second example, instead of having this:

<label>
    <span>Text Input:</span>
    <input type="text" />
</label>

you would end up with this:

<label for="textinput">Text Input:</label>
<input type="text" id="textinput" />

If you still wish to group each input with its respective <label> and maintain full control over the field groups, you can always wrap them in a <div> tag, like so:

<div class="field-group">
    <label for="textinput">Text Input:</label>
    <input type="text" id="textinput" />
</div>

CSS - Selector of label for type?

Unfortunately, what you're wanting can't be done using current CSS3 selectors.

There are plans for this feature to be included in CSS level 4 selectors, but the spec for this is not yet finalised, and certainly not implemented in any current browsers.

The idea is for a selector that would look something like this:

label /for/ [type="radio"] {
    /* styles */
}

But that's for the future, not for now. Sorry.

You can read about it here: http://css4-selectors.com/selector/css4/reference-combination/

In the meanwhile, if you need this kind of thing, you will need to make sure you structure your HTML such that the elements can reference each other using current CSS selectors.

For example, if they're next to each other, you could use this:

label + input[type="radio"] { .... }

That's as close as you'll get for the time being.

CSS Selector for selecting an element that comes BEFORE another element?

It would be possible to use the 'adjacent sibling selector' if the input was before the label. Just put the input before the label, and then modify the layout to put label before the input. Here's an example:

<head runat="server">
    <title></title>
    <style type="text/css">
    input:focus + label {font-weight: bold}
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div style="direction:rtl">
        <input type="text" id="username" />
        <label for="username">Username:</label>
    </div>
    <div style="direction:rtl">
        <input type="password" id="password" />
        <label for="password">Password:</label>
    </div>
    </form>
</body>

(It's kind of a hack, I would personally use javascript to do this)

input:focus + label {font-weight: bold}

<form id="form1" runat="server">  <div style="direction:rtl">    <input type="text" id="username" />    <label for="username">Username:</label>  </div>  <div style="direction:rtl">    <input type="password" id="password" />    <label for="password">Password:</label>  </div></form>

How to select first label within div using css?

Try with first-of-type pseudo-selector:

.form_fields label:first-of-type {
    margin: 20px;
}

Select label only if input is empty and not focused?

Selecting a previous sibling in CSS is only possible with the :has() pseudo class which at time of writing is only supported by Safari

Your current selector:

.email label:not(input[value='']:not(input:focus) ~ label)

Has syntactically incorrect parentheses, but if we fix that:

.email label:not(input[value='']):not(input:focus) ~ label

It selects all labels that come after a label that is not an input with value='', that is also not a focused input, which are all descendants of an element with class .email.

Here is how you would implement the selector you want with has():

label:has(+ #email:not(input[value='']:not(input:focus)) {
  color: green;
}

<div className='email'>
  <label htmlFor='email'>Email</label>
  <input type='email' id='email' value={email} onChange={handleEmail} />
</div>

---

Related Topics