How to show any div when the text field is focused?

Question

How can I show div.showwhen input.searchtextfocused?

<div class="select-form-holder">
   <input class="searchtext" type="text" value="Find Friends, Movies, T.V shows Games" />
   <div class="show-on-focus">xyz</div>
   <input type="submit" class="btn-search" title="Search" />
</div>

Answer 1

.searchtext:not(:focus) + .show-on-focus {
    display: none;
}

He says: "If searchtextnot :focused, get the next brother if he show-on-focusis."

Answer 2

Another way to accomplish this is using only an adjacent selector.

.show-on-focus { display: none }
.searchtext:focus + .show-on-focus {
    display: block;
}

If you have several elements that you want to hide, you can swap the position of an adjacent selector with a common selector.

.show-on-focus { display: none }
.searchtext:focus ~ .show-on-focus {
    display: block;
}

Both are not as sexy as :not, but it will be slightly better compatible with older browsers.