How to Select a Label with a Specific 'for' Attribute in CSS?

Selecting Label with Specific 'for' Attribute in CSS

When working with HTML forms, you may encounter the need to specifically target labels based on their 'for' attribute. For instance, you may want to adjust the layout of a particular label.

CSS Selector

To select a label based on its 'for' attribute, use the following CSS selector:

label[for="specific_value"] {
  /* Styles here... */
}

Replace "specific_value" with the desired value of the 'for' attribute.

Example

Consider the following HTML code:

<label for="email">Your Email:</label>

To select this label in CSS, you would use:

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

JavaScript and jQuery

You can also access the label using JavaScript or jQuery:

JavaScript (DOM):

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

jQuery:

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

Note:

• This approach is referred to as an attribute selector. Certain older browsers (such as IE6 and IE7) may not support attribute selectors.
• If the 'for' attribute value includes special characters or does not meet CSS identifier rules, it must be enclosed in single or double quotes.

The above is the detailed content of How to Select a Label with a Specific 'for' Attribute in CSS?. For more information, please follow other related articles on the PHP Chinese website!