title: Checked Radio Input not triggering :checked pseudo-selector
body: <h2>Main question:</h2>
  <p>How can the checked style not be active when the element is clearly checked as per the markup?</p>
  <h3>Context:</h3>
  <p>I ran into this issue yesterday and solved it with an ugly hack but would rather understand it better.</p>
  <p>For starters, this is the rendered markup:</p>
  <pre><code>&lt;fieldset id=&quot;Påbyggnad/Omskolning *&quot; class=&quot;RadioButton-module_RadioButtons__3slSm&quot;&gt;
    &lt;div class=&quot;RadioButton-module_RadioButton__1Ftxu&quot;&gt;
      &lt;label for=&quot;Påbyggnad i tidigare yrkesinriktning&quot;&gt;Påbyggnad i tidigare yrkesinriktning&lt;/label&gt;
      &lt;input id=&quot;Påbyggnad i tidigare yrkesinriktning&quot; name=&quot;Omskolning&quot; type=&quot;radio&quot; value=&quot;false&quot; disabled=&quot;&quot; checked=&quot;&quot;&gt;
    &lt;/div&gt;
    &lt;div class=&quot;RadioButton-module_RadioButton__1Ftxu&quot;&gt;
      &lt;label for=&quot;Omskolning i ny yrkesinriktning&quot;&gt;Omskolning i ny yrkesinriktning&lt;/label&gt;
      &lt;input id=&quot;Omskolning i ny yrkesinriktning&quot; name=&quot;Omskolning&quot; type=&quot;radio&quot; value=&quot;true&quot; disabled=&quot;&quot;&gt; 
   &lt;/div&gt;
  &lt;/fieldset&gt;
  </code></pre>
  <p>As we can see, the first input is <strong>checked</strong>, and both inputs are <strong>disabled</strong>.</p>
  <p>Despite this, only the CSS associated with the <strong>disabled</strong> pseudo-selectors is active:</p>
  <pre><code>.RadioButton-module_RadioButtonGroup__ZHytl .RadioButton-module_RadioButtons__3slSm :disabled {
      background-color: #dde0e7;
      border: 1px solid #a2a4aa;
      cursor: unset;
  }
  </code></pre>
  <p>Relevant snippet of (SCSS) stylesheet:</p>
  <pre><code>:disabled {
    background-color: $disabled-color;
    border: 1px solid $gray-2;
    cursor: unset;
  }
  :disabled:checked {
    background-color: $gray-1;
    border: 1px solid $gray-2;
  }
  </code></pre>
  <h3>Further context:</h3>
  <p>We are using <strong>React</strong> and <strong>defaultChecked</strong>. See partial implementation below:</p>
  <pre><code>export const RadioButton = ({
    label,
    id = label,
    defaultChecked,
    onClick,
    onChange,
    testSelector,
    name,
    value,
    onBlur,
    disabled,
  }) =&gt; {
    return (
      &lt;div className={s.RadioButton}&gt;
        &lt;label htmlFor={id} className={s.RadioButtonLabel}&gt;
          {label}
        &lt;/label&gt;
        &lt;input
          className={s.RadioInput}
          disabled={disabled}
          defaultChecked={defaultChecked}
          id={id}
          onClick={onClick}
          onChange={onChange}
          onBlur={onBlur}
          name={name}
          value={value}
          data-testid={testSelector}
          type=&quot;radio&quot;
        /&gt;
      &lt;/div&gt;
    )
  }
  </code></pre>
  <p>Due to the way the component is rendered, it is not atypical it is rerendered 6 times in a very short timespan (probably not ideal in itself, but lets focus on the main question instead!). When <strong>defaultChecked</strong> evaluates to <code>true</code> or <code>false</code> in one of the first 5 renders, that value appears to be persisted throughout other renders, whereas null/undefined evaluation is replaced by the first  <code>true</code>/<code>false</code> evaluation, which typically appears in the 3rd render.</p>
  <p>It seems very reasonable that <strong>defaultChecked</strong> is defined by its first non-nullish value, but then there are conflicting states:</p>
  <ul>
  <li>Markup says <code>checked</code></li>
  <li>Stylesheet says not checked</li>
  <li>defaultChecked appears to say not checked, yet the markup which is a function of the does not reflect this?</li>
  </ul>
  <p>How can the markup display <code>checked</code> if the input is indeed not checked?</p>
  <p>P.S. The &quot;ugly hack&quot; used to solve this was to ensure that defaultChecked is never evaluated to a non-nullish value during the early renders.</p>