CSS target label

Question

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

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

It doesn't seem to work, just wondering, or is this work only for jquery?

Thanks!

Answer 1

:target pseudo-class does not work the way you think, and the label never exist as a descendant of input , so this will not work.

If you are trying to refer to a label that is associated with input with either the parentage attribute or with the for attribute, this is not possible with CSS3. You can only refer to a label if it is a brother following input , with one of the following:

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

If label is an ancestor preceding a sibling or completely elsewhere, you will need to use jQuery to traverse the DOM and find it.

Answer 2

Using CSS4 you can do this:

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

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

However, CSS4 support is extremely limited. However, there is no harm in its placement.