Getting rid of !important

[Mad_Griffith]

"!important" should be use sparingly, I know. But is this a case where it cannot be gotten rid of?

    .myClass > div:nth-of-type(odd) a {       color: white;     }     .myClass .button {       color: white !important;     }

".button" is an anchor link as well and is placed in an "odd" div as well.

Edited June 19, 2015 by Mad_Griffith

[Alatoru]

It depends on will the style be applied or not. If not, for some reason, you have to force it to change.

[Mad_Griffith]

Yeah, it would not work without "!important". But I find it strange that in this case, apparently, is the number of selectors (the first declaration has 3 selectors vs 2 of the second one) to prevail and not the specificity (the second declaration is more specific than the first one)

[Alatoru]

What does the first style change after all? As it seems to be, it changes a element color to be white in every odd div inside myClass. While the second style changes color property of some classed element button inside class myClass. Tell me, what first style change and what second style change. And what cause the problem of second style, not to work.

[dsonesuk]

What you do is add a parent identifier that would give it a higher precedence over the other, then you probably would not need !important, using !important the selector of higher precedence parent selector would require !important also.

[Mad_Griffith]

I add: ".button" is an anchor link as well and is placed in an "odd" div as well.

[dsonesuk]

That is why using !important with .myClass .button would override all anchors using that class, you need to give a one a higher precedence over the other without using !important

            body .myClass > div:nth-of-type(odd) a { /* has higher precedence because higher parent hierarchy (body)*/                color: lime;            }            .myClass .button {                color: white;            }

[Mad_Griffith]

What I am actually trying to achieve is ".button" having higher precedence

[dsonesuk]

Then swap body or use parent hierarchy higher than the other.

[Mad_Griffith]

Sounds hackish to me. I'd rather stick with the !Important keyword.

[Ingolme]

The idea behind CSS is that the more specific selector takes precedence. It's not a hack because that's exactly how CSS is meant to function.

• The more components there are in a selector, the more specific it is.
• A selector with an ID in it takes precedence over any selector without an ID.

A selector "div.myClass" is more specific than ".myClass". The selector "element > .className" is more specific than "element .className"

 

Anything is better and less hackish than using !important, since the !important modifier deliberately breaks the CSS rules.

[dsonesuk]

Ha ha, yes! with just these few adjustment i can control the wwwwoooorrrlldddd! oh wait a minute? its just doing cascading as in cascading style sheet (CSS) you are cascading a selectors with higher hierarchy to achieve the result you want, damn i thought i was so close to world dominance, then.

[Mad_Griffith]

The idea behind CSS is that the more specific selector takes precedence. It's not a hack because that's exactly how CSS is meant to function.

• The more components there are in a selector, the more specific it is.
• A selector with an ID in it takes precedence over any selector without an ID.

A selector "div.myClass" is more specific than ".myClass". The selector "element > .className" is more specific than "element .className"

 

Anything is better and less hackish than using !important, since the !important modifier deliberately breaks the CSS rules.

 

Yeah well I said it sounds hackish because it is not intuitive for me.