title: pseudo class preceded by an element
body: <p>I'm trying to customize the radio and checkboxes using only css. I'm almost there except 2 little details:
  here is a markup sample:</p>
  
  <pre><code>    &lt;section&gt;
      &lt;label class="cbox radio"&gt;
          &lt;input name="how" type="radio" checked="checked" /&gt; My first radio box
      &lt;/label&gt;
  
      &lt;label class="cbox radio"&gt;
          &lt;input name="how" type="radio" /&gt; My second radio box
      &lt;/label&gt;
  
      &lt;label class="cbox radio"&gt;
          &lt;input name="how" type="radio" /&gt; My third radio box
      &lt;/label&gt;
  &lt;/section&gt;
  
  &lt;section&gt;
      &lt;label class="cbox box"&gt;
          &lt;input name="check1" type="checkbox" checked="checked" /&gt; My first box
      &lt;/label&gt;
  
      &lt;label class="cbox box"&gt;
          &lt;input name="check2" type="checkbox" /&gt; My second box
      &lt;/label&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>Every thing works fine but i can't make it work when the box is checked. I'm trying to use this pseudo class:</p>
  
  <pre><code>*::before, *::after {
      box-sizing: border-box;
  }
  
  .cbox {
      display: block;
      position: relative;
      margin: 10px 0;
      padding-left: 35px;
      cursor: pointer;
  }
  
  .cbox &gt; input {
      position: absolute;
      left: -9999px;
  }
  
  .cbox::before, .cbox::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
  }
  
  .cbox.radio::before, .cbox.radio::after {
      border-radius: 50%;
  }
  
  .cbox::before {
      display: block;
      width: 20px;
      height: 20px;
      border: 1px solid #c1caca;  
  }
  
  .cbox::after {
      display: none;
      width: 12px;
      height: 12px;
      margin: 4px;
      background-color: #2e4a5d;
      box-shadow: inset 0 15px 23px -10px rgba(187,230,240,.3),0 2px 2px rgba(0,0,0,.1);
  }
  
  /*input:checked + .cbox::before, input:hover + .cbox::before, */
  .cbox.on::before, .cbox:hover::before {
      background-color: #eaf1f6;
      border-color: #a0afbb;
  }
  
  /* input:checked + .cbox::after, */
  .cbox.on::after {
      display: block;
  }
  </code></pre>
  
  <p>And here the jquery</p>
  
  <pre><code>$(".cbox input").change(function() {
          if($(this).is(':checked')) $(this).parent('label').toggleClass('on');
  });
  </code></pre>
  
  <p>1- is there a way to make this css work?</p>
  
  <p>2- since the selector :checked is only supported on IE9+, is it recommended to use selectivizr ? or is there a better fallback solution?</p>
  
  <p>Thanks a lot</p>