CSS3 - style on focused parent element [duplicate]

Question

I know I can set a style on the focused input element like this:

input:focus
{ 
  background-color:yellow;
}

But is it somehow possible to set a style on a parent element when an input has focus? e.g.

<div class="foo">
      <input type="text />
      Hello
</div>

Can I affect the "foo" style when the input has focus here?

edit: Possible duplicate of Affecting parent element of :focus'd element (pure CSS+HTML preferred)

However, can someone explain how that works?

Answer 1

There is no parent selector in css (yet). http://css-tricks.com/parent-selectors-in-css/

You can, however, select it with jQuery:

html

<div class="parent">
    <input type="text" />
</div>

css

.parent {
    /* parent styles */
}
.parent.active {
    /* do stuff when the input is hovered */
}

js

// listen for a focus event on the input,
//  and then add a class to the parent
$('input').on('focus', function () {
    $(this).parent().addClass('active');
});

http://jsfiddle.net/M64nv/

Answer 2

No. There is no parent selector in CSS, so you cannot trigger style rules on a parent element when one of its descendants is hovered (or based on any child element conditions). You need to use Javascript for this.