0

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>

CodePen for reference

TylerH
  • 20,799
  • 66
  • 75
  • 101
Eric Nguyen
  • 926
  • 3
  • 15
  • 37
  • 1
    Q: I have a containing div that has three divs inside. I want to style only the two divs that contain the radio input. A: The easiest approach is to create a CSS class. Q: Without using class names. A: Why??? What's the problem with using CSS classes in this scenario? – paulsm4 Nov 16 '21 at 21:19
  • Am I reading this wrong or is this just a duplicate of https://stackoverflow.com/questions/1014861/is-there-a-css-parent-selector? – TylerH Nov 16 '21 at 21:39

3 Answers3

1

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

RatajS
  • 1,403
  • 1
  • 14
  • 22
1

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;
}
VladykoD
  • 284
  • 2
  • 8
0

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

Yarin Levi
  • 201
  • 1
  • 10