!important does not override?

Here's an explanation of override rule: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Here's how I understand this rule: this rule is made to take all priority from other specific rules and make current rule of higher priority.

I am probably wrong because all this rule does, is cancels CSS for specific element. I thought classes have higher priority over selectors, while IDs have higher priority over classes and come first in priority tree. !important seemed to me exception rule that can take priority from IDs further but that seems not be so:

CSS:



HTML:



Output:



Line 2 (Hello red) without !important rule in "p:last-child" is supposed to be green and not red because selector "p:last-child" has pleudo-class making it higher priority than selector with class "p.awesome"

In conclusion, !important is just commenting out/stripping CSS lines and not for specifying highest priority?

 

!important doesn't go on selectors! That's your 'problem'. It has NO business where you put it.

p:last-child {
  color:green !important;
}

Code (markup):

Is what you should be trying to do. It is applied to attribute/value pairs, NOT selectors.

 

Thanks for clearing it up. It seems it does 2 functions: when placed beside selectors, it comments out CSS line and when placed inside attribute/value pairs, it assigns higher priority to CSS line.

 

It's not commenting it out -- it's an invalid construct so that's an error behavior, not a planned one. Invalid CSS selectors are ignored. What you are seeing is not intentional or how it's supposed to work, what you are seeing is what happens when there's an error.

 

In this case, using invalid construct only makes it harder to interpret CSS for websdesigner and debug if there's a need?

 

It can also be inconsistent across browsers. ALLEGEDLY HTML 5 compliant browsers are supposed to behave the same, but that's short-sighted nonsense designed to let people sleaze out code any old way.

Some might be ignoring it because it's invalid, others might be ignoring it because they are treating !important as a tag selector... and since there's no such tag as !important... some browsers might even obey it by ignoring the invalid value. I've seen that on Blazer and iCab a couple times where an invalid selector results in the invalid part of the selector being ignored as if it's not even typed in, instead of ignoring the ENTIRE selector.