DEV Community

loading...

Discussion on: CSS cascade: Importance

Collapse
deathshadow60 profile image
deathshadow60

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.

Collapse
facundocorradini profile image
Facundo Corradini

!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...

Collapse
alohci profile image
Nicholas Stimpson • Edited

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.

Collapse
alohci profile image
Nicholas Stimpson • Edited

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.

Collapse
deathshadow60 profile image
deathshadow60 • Edited

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...

Thread Thread
alohci profile image
Nicholas Stimpson • Edited

No. Importance is controlled by !important. Importance is part of the cascade, not part of specificity.

So, in this:

<div class="ex one">Example</div>

<style>
.ex.one { color:red !important; }
.ex { color:blue !important; }
</style>

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).

Collapse
kapantzak profile image
John Kapantzakis Author

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.

Collapse
deathshadow60 profile image
deathshadow60

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!