Focusing on an element changes another CSS

Question

I want to change the color of the Hdr_nav_search_box element while focusing on another Hdr_nav_search_input element. Here are the codes: http://jsfiddle.net/FJAYk/4/ I don't understand why this is not working.

 <input class="Hdr_nav_search_input" /> <div class="Hdr_nav_search_box" /><span>search for location....</span><i>for example: blah blah</i></div> 

-

 .Hdr_nav_search_box{ padding: 0 5px; margin: 7.5px 0; width:300px; height: 25px; background: white; } .Hdr_nav_search_input:focus .Hdr_nav_search_box{ color: #d4d4d4; } .Hdr_nav_search_box span,.Hdr_nav_search_box i{ line-height: 25px; color: gray; } .Hdr_nav_search_input{ padding: 0 5px; margin: 7.5px 0; border: 0; z-index: 2; position: absolute; width:300px; height: 25px; background: transparent; } 

Answer 1

There were a few problems with your styles. Firstly, your field selector is not quite right.

 .Hdr_nav_search_input:focus .Hdr_nav_search_box 

This applies when selecting all .Hdr_nav_search_box where they are descendants of .Hdr_nav_search_input . This is actually a brother, so you want to use the following sibling + selector:

 .Hdr_nav_search_input:focus + .Hdr_nav_search_box 

---

Secondly, this selector will override the color change if it works.

 .Hdr_nav_search_box span,.Hdr_nav_search_box i{ ... } 

You can just use

 .Hdr_nav_search_box { ... } 

---

Here is a demonstration and style changes that I made to make it work.

jsFiddle

 .Hdr_nav_search_input:focus + .Hdr_nav_search_box { color: #F00; } .Hdr_nav_search_box { line-height: 25px; color: gray; }