CODEWITHSUNDEEP
jquerycsscss-selectorstarget
Matt
Matt

Reputation: 5095

Target label in CSS

Is there a possible way to target the label for an input in css3? For example I tried this method - 

input[type="text"]:focus label:target {
    color:orange !important;
}

Doesn't seem to work, just wondering or is this a job for jquery only?

Thanks!

Upvotes: 4

Views: 2395

Answers (2)

BoltClock
BoltClock

Reputation: 723538

The :target pseudo-class doesn't do what you think it does, and label can never exist as a descendant of input, so that won't work.

If you're trying to refer to a label which is associated with an input either by parentage or the for attribute, that's not possible with CSS3. You can only refer to the label if it's a sibling that follows the input, with either one of these:

input[type="text"]:focus + label
input[type="text"]:focus ~ label

If the label is an ancestor, preceding sibling or completely elsewhere, you'll need to use jQuery to traverse the DOM and locate it.

Upvotes: 4

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324620

With CSS4 you can do this:

!label /for/ input[type="text"]:focus,
!label input[type="text"]:focus {
    ...
}

The first one allows for <label for="inputid">, and the second for <label><input type="text"/></label>

However CSS4 support is extremely limited. Still, there's no harm in putting it there.

Upvotes: 0

Related Questions