CODEWITHSUNDEEP
htmlcsscss-selectorsless
Kid Diamond
Kid Diamond

Reputation: 2301

Possible to style other element on :focus?

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.

Upvotes: 5

Views: 3116

Answers (3)

fruitloaf
fruitloaf

Reputation: 2892

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.

Upvotes: 0

4dgaurav
4dgaurav

Reputation: 11506

.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

Upvotes: 4

potashin
potashin

Reputation: 44581

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.

Upvotes: 6

Related Questions