Menu
Theoretically speaking, if you had this scenario:
<style type="text/css"> .class1 { color:#F00 !important; } .class2 { color:#00F !important; } </style> <p class="class2 class1">Test</p> Which color should take precedence? How do browsers determine precedence in this scenario?
886
Inline CSS has a higher priority than embedded and external CSS. So final Order is: Value defined as Important > Inline >id nesting > id > class nesting > class > tag nesting > tag.
The more specific the CSS selector is, the higher is the precedence of the CSS property declarations inside the CSS rule owning the selector. In general terms, the more specifically (uniquely) a CSS selector targets an HTML element, the higher is its specificity.
The ID selector #first has priority over the class and tag selectors.
important rule is to include another ! important rule on a declaration with the same (or higher) specificity in the source code - and here the problem starts! This makes the CSS code confusing and the debugging will be hard, especially if you have a large style sheet!
According to this source: http://www.boogiejack.com/CSS_4.html
class2 should override the class1 styling.
Order of Specification: As a last resort, when all other conflict resolution specifications cannot determine which style should take precedence, the last style specified will be the style used.
93
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
