Drone Drone - 1 month ago 8
CSS Question

How to change parent sibling's child label when any inputbox is focused?

How to change parent sibling's child label when any inputbox is focused ?

I am trying to change label color when any of input box is focused.

<form>
<div class="parent-row">
<div class="child-row">
<select><option>Mr.</option><option>Mrs.</option></select>
<label>Name</label>
</div>
<div class="child-row"><input type="text" name="first_name"></div>
<div class="child-row"><input type="text" name="last_name"></div>
</div>
</form>


I tried but not succeed.

.parent-row:focus{
.child-row label{
color:red;
}
}


and

.parent-row:focus,.parent-row:focus label{
color:red;
}


Please help me to fix this in jsfiddle : https://jsfiddle.net/9kax864p/

Answer

I changed your HTML code little bit because there is no parent selector in css only choose siblings or children.

.parent-row select:focus ~ label{       
   color:red;        
}

.parent-row input:focus ~ label{        
   color:red;        
}
<form>
  <div class="parent-row">
    <div class="child-row">
      <input type="text" name="first_name">
      <input type="text" name="last_name">
      <select><option>Mr.</option><option>Mrs.</option></select>
      <label>Name</label>
    </div>
  </div>
</form>

Also you can see on the codepen.

Comments