Multiple CSS selector

Question

I am trying to create a CSS style to an element based on radio button check status. The following is the HTML code.

    <div>
        <input class="assaf" id="radio3" type="radio" name="radio" value="3" /> 
    </div>
    <label for="radio3">
        <span><span>
        </span></span>
        Option 3
    </label>

The problem is, I can NOT write a CSS style so label and its children style are set based on radio button status (checked or not).

Removing the first div, I can do something like this which works fine.

input.assaf[type=radio]:not(old):checked}  + label > span > span

But, I have a case that must have this div, I tried something like the following but it does not work!!

div > input.assaf[type=radio]:not(old):checked}  + label > span > span

Any idea?

Cannot do it based on your html – Huangism Feb 21 '18 at 17:13 — Huangism, Feb 21 '18 at 17:13

score 1 · Accepted Answer · answered Feb 21 '18 at 17:20

1

No. It doesn't work.

You cannot select the parent element from child element and then reach its sibling in css.

Instead, you can place the label element inside the div and use:

input.assaf[type=radio]:not(old):checked}  + label > span > span

the same as you mentioned.

If you necessarily need the div around the radio input. I would like to know why?

answered Feb 21 '18 at 17:20

whitehat

2,644
1
12
35

I would like to edit the style of existing radio buttons written in dojo. The system is huge and very complicated, so I am looking for a minimal change to do(CSS is recommended). – Mustafa Assaf Feb 21 '18 at 17:32
you can style it with `:before` and `:after` pseudo selectors on the `input`. – whitehat Feb 21 '18 at 17:36

Multiple CSS selector

1 Answers1