How to select tag with class condition

Question

I want select div.second when input has focused , how can do it ?

html

<div class="first">
        <div class="first-1">
              <div class="first-1-2">
                    <input type="text" name="" id="" />
             </div>
       </div>
 </div>
 <div class="second">hello</div>

css

.first .first-1 .first-1-2 input:focus+ .second {
  background-color: green;
}

this css does not work !

That's not possible because you cannot backtrack in CSS. This could only work if `div.second` is a sibling of `input`. The nearest you can get is with [:focus-within](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within) like so: `.first:focus-within + .second { background-color: green; }` — Martin, Jul 31 '21 at 07:47

score 1 · Accepted Answer · answered Jul 31 '21 at 07:48

You can do it with JavaScript

const div2 = document.querySelector('.second');

const myFunction = () => {
  div2.style.backgroundColor = 'blue'
}

<div class="first">
        <div class="first-1">
              <div class="first-1-2">
                    <input type="text" name="" id="" onfocus="myFunction()" />
             </div>
       </div>
 </div>
 <div class="second">hello</div>

How to select tag with class condition

1 Answers1