title: Why would the existence of a CSS rule cause another not to match?
body: <p>I've tried creating the following HTML file in Chrome:</p>
  
  <pre><code>&lt;style&gt;
  br {
  }​
  
  [required] {
    border-width: 3px;
    border-color: red;
  }
  
  &lt;/style&gt;
  &lt;input required /&gt;
  </code></pre>
  
  <p>that is the complete content of the file. The <code>[required]</code> rule does not match and the <code>&lt;input&gt;</code> remains unstyled.</p>
  
  <p>If the empty br rule is left out so that the file reads:</p>
  
  <pre><code>&lt;style&gt;
  
  [required] {
    border-width: 3px;
    border-color: red;
  }
  
  &lt;/style&gt;
  &lt;input required /&gt;
  </code></pre>
  
  <p>It works fine!</p>
  
  <p>Why would the existence of the <code>&lt;br&gt;</code> rule before the <code>[required]</code> one cause <code>[required]</code> to not match?</p>
  
  <p>Thanks.
  (It works fine is jsfiddle, you need to actually create the files.)</p>