How to focus a div which is outside input tag div

Question

I am failing to highlight my div when input tag is focused. Note:Both input tag and my target div's are not in same div.Please see code

<div><input type="text"/></div>
<div>this should change color when input is focused</div>

There is no parent selector in CSS, therefore this isn't possible while the `` is wrapped in a parent element (since you'd have to traverse from the `` to the parent and then to that element's adjacent-sibling). It's certainly possible with JavaScript (with or without using a library). — David says reinstate Monica, Apr 24 '17 at 11:03
Possible duplicate of [Is there a CSS parent selector?](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — David says reinstate Monica, Apr 24 '17 at 11:04

score 0 · Answer 1 · answered Apr 24 '17 at 11:01

Like this? This uses jQuery to change css to the div

$('#someInput').on("focus", function(){
   $("#someDiv").css("color", "red")
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><input id="someInput" type="text" /></div>
<div id="someDiv">this should change color when input is focused</div>

score 0 · Answer 2 · answered Apr 24 '17 at 11:39

You are trying to select a sibling of the parent ... uncle/aunt ;)
The bad news are: CSS can't do it
However good ol' JS will do the trick

const trigger = document.getElementById("trigger");
const target = document.getElementById("target");

trigger.addEventListener("focusin", function() {
  target.classList.add("triggered");
});
trigger.addEventListener("focusout", function() {
  target.classList.remove("triggered");
});

.triggered {
  color: red;
}

<div>
  <input id="trigger" type="text" />
</div>
<div id="target">this should change color when input is focused</div>

How to focus a div which is outside input tag div

2 Answers2