1

I have this html:

<div class="header">
    <div class="active-tab-name"> Inbox </div>
        <form class="search-box" method="get" action="#">

            <input type="text" name="search_query" />

            <button class="icon-search"></button>

        </form> 
</div>

I need to change the property of the button when my input is focused : on input:focus with css. Here they are siblings and not nested. Is it possible?

web-tiki
  • 99,765
  • 32
  • 217
  • 249
Sony Mathew
  • 2,929
  • 2
  • 22
  • 29

1 Answers1

2

If the button is the following sibling of the input (as in your example code), you can use the direct sibling selector + :

input:focus + button{
    background:gold;
}

DEMO

If the button is a sibling of the input but not directly after the input, you can use the general sibling selector ~ :

input:focus ~ button{
    background:gold;
}

DEMO

web-tiki
  • 99,765
  • 32
  • 217
  • 249
  • Thanks man. It works awesomely. This is a generic doubt, is it possible to change properties of class that is not sibling but two level up, say parent's parent or something.? – Sony Mathew Jul 11 '14 at 07:38
  • @ynos1234 there is no parent selector in CSS, check this : http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector and you can't select previous siblings in CSS either. – web-tiki Jul 11 '14 at 07:45