0

I have the following HTML:

<div class="row">

    <div class="col">
        <div class="wrapper">
            <input type="radio" value="value-0" />
        </div>
    </div>

    <div class="col">
        <div class="wrapper">
            <input type="radio" value="value-1" checked="checked" >
        </div>
    </div>

</div>

Is there a way in SASS to select .col, closest to a checked radio button?

francesca
  • 559
  • 3
  • 10
  • 19
  • [Unfortunately, the short answer is "no"](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector), you cannot select an element based on the presence of any child element. – Andrew Nov 13 '19 at 20:28

2 Answers2

1

Unfortunately no, you cannot select an element based on the presence of any child element.

A solution for your problem would be to use JavaScript. You can select all your radio buttons, traverse up the DOM tree to find the parent .col element (for example, with jQuery's .closest() function if you're using jQuery, and add a new class to those col elements.

E.g. (if you're using jQuery)

$(".col > input[type=radio]").closest(".col").addClass("col-with-radio")

...and then you can style the .col-with-radio class.

Andrew
  • 763
  • 7
  • 21
0

Not unless they are siblings. In the current hierarchy you posted, this is not possible with SASS.

Our_Benefactors
  • 3,220
  • 3
  • 21
  • 27