title: Less Specific CSS Selectors Overriding Styles
body: <p>I thought I understood how CSS selectors worked, the more specific selectors override less specific selectors:</p>
  
  <p><code>#ids &gt; .classes &gt; element &gt; :attribute</code></p>
  
  <p>I have an element that gets a default <code>box-shadow</code> color with <code>input:focus</code> as its selector.  When I add style to override that property, the default box-shadow color gets applied.  Ignore the horrible selectors for now, I was just trying to get it to work:</p>
  
  <p><img src="https://i.stack.imgur.com/fzwb8.png" alt="enter image description here"></p>
  
  <p>Am I missing something?  By all my understanding, the <code>box-shadow</code> with the <code>input:focus</code> selector should be overwritten.  </p>