DEV Community

loading...

Discussion on: CSS cascade: Importance

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