I have an Input type search and a div just below it.
I want to change the color of the div from blue to red when the search box is focused.

my Div

```
  <div id="demo-2">
    <input type="search" placeholder="Search By Title, Author" />
    <div class="autocomplete">
      hello
    </div>
  </div>

```

the classes I have applied

```
#demo-2 input[type="search"]:focus {
  width: 275px;
  padding-left: 32px;
  color: #000;
  background-color: #fff;
  cursor: auto;
}

.autocomplete {
  background-color: blue;
  height: 350px;
  width: 275px;
  position: absolute;
  display: block;
  right: 1em;
  top: 1em;
  z-index: -50;
  margin-right: 20px;
}

```

My requirement is that the background-color of class autocomplete should change from blue to red when the search is focused without using any javascript.

Tried below code but didn't work

```
#demo-2 input[type="search"]:focus {
  width: 275px;
  padding-left: 32px;
  color: #000;
  background-color: #fff;
  cursor: auto;

  .autocomplete {
    background-color: red;
  }
}

```