How to select a sibling following an element having a child without using `:has`?

Asked Oct 02 '17 at 16:27

Active Oct 02 '17 at 16:27

Viewed 44 times

I have the following fragment:

<div>
  <input type="radio" class="A">
  <input type="radio" class="B">
</div>
<div class="A"></div>
<div class="B"></div>

I would like to select a div, who is following a div containing a checked radio button having the same class.

If I understand level 4 selectors correctly, this might do the job:

div:has(>input[type="radio"].A:checked) ~ div.A,
div:has(>input[type="radio"].B:checked) ~ div.B

But my browser does not support the :has pseudo class.

Is it possible to work around this without level 4 support?

asked Oct 02 '17 at 16:27

ceving

1

[No](https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector#answer-1014958). I would just change html structure in such case. – Vanity Slug - codidact.com Oct 02 '17 at 16:41
1

[Edge is the only one considering adding `:has()`](http://caniuse.com/#feat=css-has). Please upvote it [here](https://wpdev.uservoice.com/forums/257854-microsoft-edge-developer/suggestions/8977591--has). – Vanity Slug - codidact.com Oct 02 '17 at 16:45
@AlexL I am trying this already. ;-) – ceving Oct 02 '17 at 16:48

0 Answers0