Change element border when sub-element:focus?

Advanced semi-backwards CSS selectors. :-)

[JAB Creations]

Ok I'm not sure if I can do this with CSS but it's worth a shot before I wander over to the JS forums. :)

I'm trying to get a label that normally has a dotted border to have a solid border when the input within it is focused.

Here is the basic code...

<label class="posticon" for="example"><input id="example" /></label>

So first I use the selector to select the specific label element(s)...

label.posticon {}

Then I select the state of the input element...

label.posticon input:focus {}

But beyond that I don't know how to reselect the label which I doubt is possible?

Remember I only want to set the border (of the label itself) to solid when it's (sub-element) input is focused (to denote that the option has been selected and remains selected).

Another issue may be that when the user focuses on another element that the focus is lost? Suggestions? If there are any JS suggestions please keep in mind the pages will be served as application/xhtml+xml. :)

John

[Robin_reala]

Nope, you can't target parent elements in CSS. However, there may be another way of doing it. If your pages makes sense semtaically to have the label after the input (which you'd usually do with radio or checkbox inputs) then you can use the sibling combinator to target it. E.g.:

input:focus, input:focus + label { border: 5px solid red; }

Of course, IEs less than 7 don't understand that, but then IE doesn't understand :focus anyway.