title: What CSS specificity rule is causing the problem I'm seeing?
body: <p>I've got a left-hand border on items in a list, and for all of them I set the <code>border-left-color</code> to transparent. The active item, denoted by a css class &quot;active day&quot; gets an actual color to its border. The code looks something like this (note I've omitted irrelevant styles):</p>
  <pre><code>&lt;!-- example.html --&gt;
  
  &lt;div id=&quot;day-sidebar&quot;&gt;
      &lt;div class=&quot;active-day&quot;&gt;
          &lt;h2&gt;19&lt;/h2&gt;
          &lt;p&gt;Fri&lt;/p&gt;
      &lt;/div&gt;                
      &lt;div&gt;
          &lt;h2&gt;20&lt;/h2&gt;
          &lt;p&gt;Sat&lt;/p&gt;
      &lt;/div&gt;                
      &lt;div&gt;
          &lt;h2&gt;21&lt;/h2&gt;
          &lt;p&gt;Sun&lt;/p&gt;
      &lt;/div&gt;                
  &lt;/div&gt;
  </code></pre>
  <pre><code>/* example.css */
  
  #day-sidebar div {
      border-left-width: 15px;
      border-left-style: solid;
      border-left-color: transparent;
  }
  
  .active-day {
      border-left-color: red;
  }
  
  </code></pre>
  <p>My understanding is:</p>
  <ul>
  <li>Classes take higher precedence than tags</li>
  <li>Within a CSS file, rules later in the file take precedence to rules earlier in the file</li>
  </ul>
  <p>Yet my first <code>div</code> in this example does not take on the new border color for <code>active-day</code>. Why is this?</p>
  <p>Note: It works when I add <code>!important</code> to the CSS, but I understand that should only be used as a final measure.</p>