How to find sibling that has focused child in CSS

Question

I have the following markup and want to give a style to input-inner-button when the select is focused, how can I do that in CSS/SCSS?

<div class="input-wrapper">
  <div>
    <select>
      <option value="">Select</option>
      <option value="x">x</option>
      <option value="y">y</option>
    </select>
  </div>
  <div class="input-inner-button-group">
    <div class="input-inner-button">Inner Button</div>
  </div>
</div>

update: I need the solution to be supported in Chrome, FF, IE back to 10, and Edge.

@ThanveerShah - I disagree. If there is a CSS only solution, that's much better. — dwjohnston, Apr 29 '19 at 05:41
"IF", But for the way he has structured the code, there isn't a CSS solution — Thanveer Shah, Apr 29 '19 at 05:42

score 2 · Answer 1 · answered Apr 29 '19 at 05:33

2

You can use the newer :focus-within pseudo selector on the select container. (see here for current support)

The :focus-within CSS pseudo-class represents an element that has received focus or contains an element that has received focus.

See demo below:

.input-wrapper > div:first-child:focus-within + div .input-inner-button {
  background: blue;
}

<div class="input-wrapper">
  <div>
    <select>
      <option value="">Select</option>
      <option value="x">x</option>
      <option value="y">y</option>
    </select>
  </div>
  <div class="input-inner-button-group">
    <div class="input-inner-button">inner button</div>
  </div>
</div>

answered Apr 29 '19 at 05:33

kukkuz

37,972
6
47
83

It's not well supported by every browser - https://caniuse.com/#search=focus-within – Sylwek Apr 29 '19 at 05:38
@Sylwek yeah its not widely supported - you can see that I've included that in my answer :) – kukkuz Apr 29 '19 at 05:41
1

My bad, I didn't see that. But good to know that there is such pseudo-class :) – Sylwek Apr 29 '19 at 05:43

score 1 · Answer 2 · answered Apr 29 '19 at 05:38

As far as I know, it's not possibel with css exactly in your case (solution that will be supported by every browser). You have to use JS or you can remove <div> that is as parent of <select> and you can use mix of pseudo class :focus and + selector

select:focus + .input-inner-button-group .input-inner-button {
    background: green;
}

<div class="input-wrapper">
    <select>
      <option value="">Select</option>
      <option value="x">x</option>
      <option value="y">y</option>
    </select>
  <div class="input-inner-button-group">
    <div class="input-inner-button">my inner button</div>
  </div>
</div>

gavgrif · Answer 3 · 2019-04-29T05:43:42.020

This IS possible in CSS - if I understand your question - you want to change the styling of the inner button when the select has focus.

You can use the :focus pseudoselector and the direct sibling combinator ("+") in css

All you have to do is remove the wrapping div around the select (so that it is a true sibling of the .input-inner-button-group) and then when the select is focussed - the contents of the next div (sibling) can be targeted. Then you have to go into that div to get the inner div.

I have added a button to demonstrate and put a margin top on it so that it is clear of the select when opened.

.input-inner-button-group {
  margin-top: 60px;
}

.input-wrapper select:focus + .input-inner-button-group .input-inner-button button {
background: red;
}

<div class="input-wrapper">
  <select>
    <option value="">Select</option>
    <option value="x">x</option>
    <option value="y">y</option>
  </select>
  <div class="input-inner-button-group">
    <div class="input-inner-button">
     <button type="button">Save</button>
    </div>
  </div>
</div>

How to find sibling that has focused child in CSS

3 Answers3