css parent/sibling selector

Question

I have something like this

<form class="Form">
  <FormField>
    <label class="FormLabel" ..>
    <div class="FormInput">
      <div class="InputField">
        <input../>
      </div>
    </div>
  </FormField>
</form>

I need to apply styles to FormLabel when input is focussed.
I understand that we cant get the parent selector(Is there a CSS parent selector?) I want a work around to access the parent using css only (not use jquery)

I tried this using & in LESS

.Form {
  .FormField {
    .Input:focus & .FormLabel {
       border:green
     }
   }
}

Still no luck :/ .. What am I missing? Thanks!

Possible duplicate of [Is there a CSS parent selector?](http://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector) — Vucko, Jan 26 '16 at 23:13
@Vucko Yes I have seen that thread. But I want a work around — suprita shankar, Jan 26 '16 at 23:16
Is there a particular reason why you don't want to use Javascript? With JS and especially with JQuery this becomes trivial. With CSS4 this may be possible, but you won't be compatible with even modern browsers, where as very few people disable javascript, and the people who do are pretty accustomed to forgoing nice effects like this. — rp.beltran, Jan 26 '16 at 23:28
The CSS4 way would be `parent:has(> child) { /*Parent Styles*/ }`. — rp.beltran, Jan 26 '16 at 23:32

mumbles · Accepted Answer · 2016-01-26T23:38:00.203

2

There is no way, currently, to select the parent of an item using CSS. It must be done with JavaScript/jQuery.

Since there is no way to get the parent item of the item that's in focus (in this case, the input), you cannot change it's style using pure CSS.

edited Jan 26 '16 at 23:38

answered Jan 26 '16 at 23:17

mumbles

38
3

javascript, wether Jquery or vanilla – PookMook Jan 26 '16 at 23:19

css parent/sibling selector

1 Answers1