CSS3 - style on focused parent element

Question

I know that I can style the focused input element as follows:

input:focus { background-color:yellow; } 

But is it possible to set the style in the parent when the focus is in the input? eg.

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

Can I influence the foo style when there is focus?

edit: Possible duplicate Effect on parent: focus'd (preferred CSS + HTML)

However, can someone explain how this works?

Answer 1

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

You can, however, select it using 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

Not. CSS does not have a parent selector, so you cannot initiate style rules for a parent when one of its descendants hangs (or is based on any conditions of the children). For this you need to use Javascript.