title: CSS Not working On Chrome
body: <p>I am trying to make a cool looking checkbox.I got a checkbox followed by a hidden input then a label.I am trying to change the font weight of the label when the checkbox is checked.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;html&gt;
      &lt;head&gt;
   &lt;style type="text/css"&gt;
     input[type="checkbox"]:checked + input[type="hidden"] + label{
      font-weight:bold;
     }
   &lt;/style&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
   &lt;div&gt;
    &lt;input type="checkbox" id="1"/&gt;
    &lt;input type="hidden"/&gt;
    &lt;label for="1"&gt;My Label&lt;/label&gt;
   &lt;div&gt;
      &lt;/body&gt;
  
      &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>But I can't make it work on Chrome.But if I try this on jsfiddle with chrome it works!!!!!</p>
  
  <h2><a href="http://jsfiddle.net/9zh477rk/" rel="nofollow">Here is the Fiddle</a></h2>
  
  <p>Any ideas?</p>