How to Target Labels with Specific 'for' Attributes in CSS?

Selecting Labels by 'for' Attribute in CSS

To modify the layout of specific labels based on their 'for' attribute, CSS provides attribute selectors.

Attribute Selector for Label

The syntax for selecting a label by its 'for' attribute is:

label[for="XYZ"]

where "XYZ" represents the desired attribute value.

Usage

CSS:

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

JavaScript (DOM):

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

JavaScript (jQuery):

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

Attribute Value Matching

If the attribute value contains characters not allowed in CSS identifiers (e.g., spaces, brackets), enclose it in single or double quotes:

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

Browser Compatibility

Note that attribute selectors may not be supported in older browsers like IE versions below 8. For cross-browser compatibility, consider using classes or other structural methods.

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