title: CSS :read-only selector - Disrupts :disabled in IE 11
body: <p>I experience, that adding a CSS selector including :read-only will make the other CSS selectors not work in Internet Explorer.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>textarea {
    margin: 5px;  
  }
  
  textarea.ok_class:disabled, 
  textarea.ok_class:disabled {
    border: 1px solid green;
  }
  
  textarea.not_ok_class:read-only,
  textarea.not_ok_class:disabled,
  textarea.not_ok_class:disabled {
    border: 1px solid red;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;textarea name="ta_1" disabled class="ok_class"&gt;Without read-only 1&lt;/textarea&gt;
  &lt;br&gt;
  &lt;textarea name="ta_2" disabled class="ok_class"&gt;Without read-only 2&lt;/textarea&gt;
  &lt;br&gt;
  &lt;textarea name="ta_3" disabled class="not_ok_class"&gt;With read-only 1&lt;/textarea&gt;
  &lt;br&gt;
  &lt;textarea name="ta_4" disabled class="not_ok_class"&gt;With read-only 2&lt;/textarea&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>With the above, the border is <b>not</b> red for the disabled textareas with the not_ok_class class. </p>
  
  <p>This is only a problem in Internet Explorer (tested in v. 11). In Chrome it is working as expected.</p>
  
  <p>Removing the line <i>textarea.not_ok_class:read-only,</i> will make it work in IE. </p>
  
  <p>Why is the :read-only pseudo selector disrupting the other CSS selectors? 
  What am i missing?</p>
  
  <p>Thanks in advance</p>