Question

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!

Answer 1

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.