Highlight div preceeding div that contains focused input element

Question

<div>highlight me</div><div><input /></div>

When the user puts their cursor in the input box and triggers :focus, I want to highlight the first div (apply a style to it).

non working example: https://codepen.io/samkeddy/pen/vJaqqv

Related to [How to style the parent element when hovering a child element?](https://stackoverflow.com/questions/8114657/how-to-style-the-parent-element-when-hovering-a-child-element) — Samuil Petrov, Aug 25 '17 at 13:25
https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector — tech2017, Aug 25 '17 at 13:31

score 1 · Answer 1 · answered Aug 25 '17 at 14:21

Actually previous solution is absolute but
If you dont want to use the javascript here you can go with little css i have done i dont if this helps you or not but a small approach towards your question

input:focus + .head{
  color: red;
}

<input>
<div class="head">highlight me</div>

score 0 · Answer 2 · answered Aug 25 '17 at 13:37

function highlight()
{
var div=document.getElementById("higlightDiv");
  div.style.color="red";
}

div{
  color:blue;
}

<div id="higlightDiv">highlight me</div><div><input type="text" onfocus="highlight();" /></div>

You can do it like this with javascript I guess

Highlight div preceeding div that contains focused input element

2 Answers2