0

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/

Drone
  • 1,114
  • 1
  • 12
  • 31
  • 1
    There are no previous or parent selectors in CSS. But if you are willing to change the markup and play around with order of the elements you could use some answers [*posted here*](http://stackoverflow.com/q/1817792/5496966). – AA2992 Oct 22 '16 at 11:25
  • This isn't possible at all, unless you either **a:** change the HTML or **b:** use JavaScript since, as noted by Drone, there are no parent selectors in CSS (as yet). – David Thomas Oct 22 '16 at 11:30

1 Answers1

2

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.

oguzhancerit
  • 1,436
  • 1
  • 16
  • 27