title: Why does IE and Edge ignore a whole CSS rule?
body: <p>Consider the following CSS rule:</p>
  
  <pre><code>input:focus,
  div:focus-within {
     box-shadow: none !important; 
  }
  </code></pre>
  
  <p>This rule overwrites Bootstrap's input box-shadow on focus and also a focus contained within a specific div. While the <code>:focus-within</code> is a fairly new pseudo selector, it is assumed that IE and Edge won't understand the meaning of it.</p>
  
  <p>Thus the expected outcome would be that IE and Edge would ignore the unrecognised selector and apply the CSS rule to the other matched selectors it does know. </p>
  
  <p>However, this is not the case. They both ignore the <strong>whole</strong> rule, even though it understands the <code>:focus</code> selector.</p>
  
  <p>My question is: </p>
  
  <p>Part 1: Why does it do this? Why not just ignore the single selector?</p>
  
  <p>Part 2: Is there a hack to make them ignore the single selector, while still making it work on modern browsers?</p>
  
  <p>Yes, I could make another css rule to only apply to IE and Edge, however that is just bloating the code and is somewhat unnecessary.</p>