title: Precedence in CSS selector specifity conflicts (type vs class selector)
body: <p>I learned about selector precedence from this <a href="http://www.vanseodesign.com/css/css-specificity-inheritance-cascaade/" rel="nofollow noreferrer">tutorial</a>. I have trouble understanding the behavior of this in one case. I have an element in HTML:</p>
  <pre><code>&lt;input class=&quot;top_bar_login_form_input&quot; type=&quot;text&quot;  name=&quot;email&quot; placeholder=&quot;Prijavno ime&quot;&gt;
  </code></pre>
  <p>The problem is that properties from another selector override the properties from the class.</p>
  <p><img src="https://i.stack.imgur.com/4OXKZ.png" alt="Picture" /></p>
  <p>As shown in the picture above the class gets overridden by a less specific selector. The element gets selected by <code>input[type=&quot;text&quot;]</code>, which is less specific than a class. The only reasoning behind these behavior that I see is that the <code>.inputbox</code> class is also calculated in determining the precedence, even though it doesn't match the element.</p>
  <p>Why does the type selector override the class selector?</p>