How does declaration order affect the final style?

CSSJunior~1 min read

Declaration order affects the final style when two rules have the same specificity and the same style source. In this situation, the principle applies:

"The last declaration wins"

Example

css

p {
  color: blue;
}

p {
  color: red;
}

The result: the text will be red, because the second rule is lower and overrides the first.

When order matters

Order matters only if:

the rules have the same specificity
they belong to the same type of source (for example, both from the same CSS file)
there is no !important and no inline style

When order has no effect

Order will not work if the second declaration is weaker in specificity:

css

#id { color: blue; }
p { color: red; }

Here ID will win, even if it is declared higher up.

Summary

Declaration order works as the last level of the cascade: if priority and specificity are equal, the rule written lower overrides the one above it.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.

How does declaration order affect the final style?

#Example

#When order matters

#When order has no effect

#Summary

Short Answer

Example

When order matters

When order has no effect

Summary