Mad_Griffith Posted June 19, 2015 Share Posted June 19, 2015 (edited) "!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 Link to comment Share on other sites More sharing options...
Alatoru Posted June 19, 2015 Share Posted June 19, 2015 It depends on will the style be applied or not. If not, for some reason, you have to force it to change. Link to comment Share on other sites More sharing options...
Mad_Griffith Posted June 19, 2015 Author Share Posted June 19, 2015 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) Link to comment Share on other sites More sharing options...
Alatoru Posted June 19, 2015 Share Posted June 19, 2015 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted June 19, 2015 Share Posted June 19, 2015 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. Link to comment Share on other sites More sharing options...
Mad_Griffith Posted June 19, 2015 Author Share Posted June 19, 2015 I add: ".button" is an anchor link as well and is placed in an "odd" div as well. Link to comment Share on other sites More sharing options...
dsonesuk Posted June 19, 2015 Share Posted June 19, 2015 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; } Link to comment Share on other sites More sharing options...
Mad_Griffith Posted June 19, 2015 Author Share Posted June 19, 2015 What I am actually trying to achieve is ".button" having higher precedence Link to comment Share on other sites More sharing options...
dsonesuk Posted June 19, 2015 Share Posted June 19, 2015 Then swap body or use parent hierarchy higher than the other. Link to comment Share on other sites More sharing options...
Mad_Griffith Posted June 20, 2015 Author Share Posted June 20, 2015 Sounds hackish to me. I'd rather stick with the !Important keyword. Link to comment Share on other sites More sharing options...
Ingolme Posted June 20, 2015 Share Posted June 20, 2015 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. Link to comment Share on other sites More sharing options...
dsonesuk Posted June 20, 2015 Share Posted June 20, 2015 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. Link to comment Share on other sites More sharing options...
Mad_Griffith Posted June 20, 2015 Author Share Posted June 20, 2015 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now