You're missing the proper word for all this: Specificity. The order in which selectors and rules like !important are applied and/or "cascade"
That said, if you use !important in production code MOST of the time you either don't have the right selector, or there's something horrifyingly wrong with the code. Only time I've ever HAD to use !important code I've written has been in Stylus.
A front-end developer from Mar del Plata, Argentina. Passionate about CSS, accessibility, and JS. Currently working on "just a small fix", as I've been doing for the last 15 years.
Sorry for this bit of pendantry, I used to think that, but that's not quite correct either. Rather than !important affecting the origin, think of origin and importance as complementary, and that they work together as a pair to affect the highest level of precedence within the cascade.
Specificity has nothing to do with this article. Specificity operates within each layer of the cascade, not between the layers, which is the subject of this article.
The what now? It's all sibling level specificity overrides. class can't trump !important, !important trumps !important. That's PART of specificity.
Just like class trumps tag, parent trumps children, id trumps classes, etc, etc. Like the different hands in poker. That's specificity. Just as the order is part of specificity.
Specificity -- The testing of conditions and traits of selectors and identifiers as they are applied to the document.
Unless you have an entirely different understanding of and/or definition of the term as it applies to HTML and CSS...
the text "Example" will be red. Because within the author stylesheet origin importance layer of the cascade, the specificity of .ex.one trumps the specificity of .ex.
Similarly, the order of styles is not part of specificity, but part of the cascade.
Default inheritance, on the other hand, is neither part of specificity nor the wider cascade. It applies only when the cascade fails to resolve any specified value for a property (and only then if the property is defined as an inherited one).
You're right! "!important" should always be considered as the last option.
I'm just trying to present some simple examples in order to verify that the browser (Chrome here) implements the cascade process as indicated by the specification.
I'm just trying to present some simple examples in order to verify that the browser (Chrome here) implements the cascade process as indicated by the specification.
Which is good: Trust but verify!
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
You're missing the proper word for all this: Specificity. The order in which selectors and rules like !important are applied and/or "cascade"
That said, if you use !important in production code MOST of the time you either don't have the right selector, or there's something horrifyingly wrong with the code. Only time I've ever HAD to use !important code I've written has been in Stylus.
Still, it's good to know the rules.
!important actually affects the origin, not the specificity.
Origin is in a whole level above specificity when it comes to determining the cascading value
developer.mozilla.org/en-US/docs/W...
Sorry for this bit of pendantry, I used to think that, but that's not quite correct either. Rather than !important affecting the origin, think of origin and importance as complementary, and that they work together as a pair to affect the highest level of precedence within the cascade.
Specificity has nothing to do with this article. Specificity operates within each layer of the cascade, not between the layers, which is the subject of this article.
The what now? It's all sibling level specificity overrides. class can't trump !important, !important trumps !important. That's PART of specificity.
Just like class trumps tag, parent trumps children, id trumps classes, etc, etc. Like the different hands in poker. That's specificity. Just as the order is part of specificity.
Specificity -- The testing of conditions and traits of selectors and identifiers as they are applied to the document.
Unless you have an entirely different understanding of and/or definition of the term as it applies to HTML and CSS...
No. Importance is controlled by !important. Importance is part of the cascade, not part of specificity.
So, in this:
the text "Example" will be red. Because within the author stylesheet origin importance layer of the cascade, the specificity of
.ex.onetrumps the specificity of.ex.Similarly, the order of styles is not part of specificity, but part of the cascade.
Default inheritance, on the other hand, is neither part of specificity nor the wider cascade. It applies only when the cascade fails to resolve any specified value for a property (and only then if the property is defined as an inherited one).
You're right! "!important" should always be considered as the last option.
I'm just trying to present some simple examples in order to verify that the browser (Chrome here) implements the cascade process as indicated by the specification.
Which is good: Trust but verify!