CODEWITHSUNDEEP
csscss-selectors
Iladarsda
Iladarsda

Reputation: 10692

CSS selectors - how to select 'for' in CSS?

I'm using jQuery validation.

When for is now valid, validator is creating those:

<label class="error" for="username" generated="true">

As all label has got the same class=error can I select with CSS this exact one based on 'for'?

I know how to sort this out with jQuery - but always looking for cleanest, purest way. Any suggestion much appreciated.

Pete

Upvotes: 15

Views: 19217

Answers (3)

thirtydot
thirtydot

Reputation: 228302

Using the (CSS2) attribute selector:

.error[for="username"]

This will work in IE8+ and all modern browsers.

IE7's attribute selector is buggy: as explained here, to match for you must use htmlFor.

So, if you need IE7 support, use this:

.error[for="username"], .error[htmlFor="username"]

Upvotes: 26

Michael Edenfield
Michael Edenfield

Reputation: 28338

Any attribute can be selected with CSS or jQuery using the [] notation. CSS applies to any XML-like syntax, not just HTML -- it doesn't know (or care) what attributes are "valid" as long as the structure is well-formed.

.error[for='username'] {

}

or for a "starts with"

.error[for^='userprefix'] {

}

Upvotes: 5

Alex Pliutau
Alex Pliutau

Reputation: 21947

In the css:

.error[for=username] {
}

In the jQuery

$('.error[for=username]')

Upvotes: 2

Related Questions