Possible to style other element on :focus?

Question

Is it possible to style another element on :focus of a specific element?

Something like:

input:focus #header {
    display: none;
}

I tried doing that but it didn't work.

Answer 1

Yes,it is possible if element is a sibling or a child to the :focus element. If it is not your case (affect whatever you want) than you should use javascript.

Answer 2

.input:focus #header

That is applying selecting all #header where they are a descendant of input

If its a sibling so you want, use the next sibling selector +:

input:focus + #header

For more information on child/sibling combinators

Answer 3

you can also use 'preceded by' selector -> https://www.w3schools.com/cssref/css_selectors.asp

HTML:

  <button>button</button>
  <div class="div1">div1</div>

CSS:

button:hover ~ .div1 {
    color: red; 
}

So you hover over the button BUT the div1 element gets styled.

Just make sure that the BUTTON element is first and the element you are styling is SECOND.