-1

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>
Swamy
  • 103
  • 1
  • 8
  • Have you tried anything? – Carl Binalla Apr 24 '17 at 10:55
  • 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 Thomas 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 Thomas Apr 24 '17 at 11:04

2 Answers2

0

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>
Carl Binalla
  • 5,393
  • 5
  • 27
  • 46
0

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>
confusius
  • 571
  • 1
  • 4
  • 14