Why does the previous CSS rule override the later rule?

Question

In my stylesheet, .four-across li defines width: 174px; on line 8806. Below this rule, on line 9603 .no-search-results defines width: auto; . However, rule 174px overrides the element with .no-search-results . Why would that be?

Answer 1

You should read about CSS specificity.

.four-across li more specific than .no-search-results , so it has a higher level of importance.

Specificity is calculated by counting the various components of your css and expressing them in the form of (a, b, c, d). This will be clearer with an example, but first components.

• Element, pseudo-element: d = 1 - (0,0,0,1)
• Class, pseudo-class, attribute: c = 1 - (0,0,1,0)
• Id: b = 1 - (0,1,0,0)
• Inline Style: a = 1 - (1,0,0,0)

Understanding CSS Style Priority: Specificity, Inheritance, and Cascade

The order of documents matters only when the specified specificity is exactly the same. In your example, the first selector is (0,0,1,1) and the second is (0,0,1,0), so the first overrides the second, regardless of how they are arranged in the CSS document.

Answer 2

Reading:

• View CSS Style Priority Level

• Understanding CSS Style Priority: Specificity, Inheritance, and Cascade

In this case, this is because the class and type of the element are more specific than just the class, and it prefers order.

Answer 3

Two reasons:

• The last checked rule takes precedence over the checked earlier, all other things being equal.
• The more specific the rule (two qualifiers as opposed to one), the higher the priority.