I have a containing div that has three divs inside. I want to style only the two divs that contain the radio input. Without using class names, is it possible to select those two divs?

If not, how do I select just the radio inputs and style those? Here's my attempt, with non-working CSS:

.container > div > input[type="radio"] {
  border:1px solid green;
}

<div class="container">
  <div> 
    <input type="radio" id="22" name="SetFour">
    <label for="22"><span>Selection One</span></label>
  </div>
  <div>Some Random Div</div>
  <div> 
    <input type="radio" id="23" name="SetFour">
    <label for="23"><span>Selection Two</span></label>
  </div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePen for reference

CodePudding user response：

The selector selects the radio buttons, but the radio inputs don’t support the border property. In case you want to select the divs, not the inputs, use classes; although there is a :has() pseudo‐class in the specifications, no major browser currently supports it.
https://caniuse.com/css-has
https://www.w3.org/TR/selectors-4/#relational

CodePudding user response：

you have to set them a class. write the similar class and styling. or their id.

CodePudding user response：

You can use nth-of-type. But do this only if you have no alternatives and are sure that this block will not change in the future.

.container > div:nth-of-type(1),
.container > div:nth-of-type(3) {
   border:1px solid green;
}