0

We have run into a wall trying to figure out why CSS inheritance does not work as expected.

To describe the problem... I have a reusable CSS that defines various background colors and we switch backgrounds and foregrounds of various sections of the page per user configuration. The problem is that if one of my colors that gets assigned to a parent DIV and is defined further down in the CSS, than it overrides the CSS attributes defined at the child DIV. Case in point is this JSBin example - JSBin link!, where because bgBlack is defined in the CSS file AFTER bgWhite, the user agent is using properties of bgBlack even for contents of the bgWhite DIV! We need to make this work otherwise we will be in deep trouble with regards to user being able to switch colors etc. without involving developers. Any help and guidance is greatly appreciated!

<!DOCTYPE html>
<html>
<head>
   <meta name="description" content="[add your bin description]" />
   <meta charset=utf-8 />
   <title>JS Bin</title>
</head>
<body class="bgDark">

  <div class="bgWhite" style="margin:100px;padding:20px;height:200px;width:200px;">
  <h1>Hello World!</h1>
  <ul>
  <li><a href="#">This is a link 1</a></li>
  <li><a href="#">This is a link 2</a></li>
  <li><a href="#">This is a link 3</a></li>
  </ul>
  </div>

</body>
</html>

AND CSS for this is....

.bgWhite { background-color:white;color:black; }
.bgWhite a { color:black; }
.bgWhite a:hover { color:red; }

.bgDark { background-color:black;color:white; }
.bgDark a { color:white; }
.bgDark a:hover { color:blue; }
smallworld
  • 910
  • 7
  • 15

5 Answers5

2

Because both sets of styles share identical specificity, the one that is written latest has priority on matched elements.

zzzzBov
  • 174,988
  • 54
  • 320
  • 367
  • Well, then I must have missed something on how specificity is calculated! I was under impression that CSS properties defined at the immediate parent will be considered more specific than the one at the root of the document, no? I am still having hard time comprehending this part... – smallworld Oct 12 '12 at 15:33
  • The selector is matching the links, both selectors match the `a` elements. No inheritance is happening with those selectors, as they're applied directly. Specificity is based on the number and type of selectors used, not on which nodes in the tree were matched. – zzzzBov Oct 12 '12 at 15:39
  • Thank you again for everyone's help. We will need to figure out an alternative because we didn't catch this until somebody tested our system with a totally untested scenario - where colors defined at the bottom of the CSS file were put at the top node! bummer! – smallworld Oct 12 '12 at 16:05
1

You can re-overwrite the properties with a more specific selector. 

body .bgWhite, .bgWhite { background-color:white;color:black; }
body .bgWhite a, .bgWhite a { color:black; }
body .bgWhite a:hover, .bgWhite a:hover { color:red; }

body .bgDark, .bgDark { background-color:black;color:white; }
body .bgDark a, .bgDark a { color:white; }
body .bgDark a:hover, .bgDark a:hover { color:blue; }

Demo

Giona
  • 20,734
  • 4
  • 56
  • 68
  • Thank you for the mention of typo, I corrected it. For re-overwrite part, the problem is that this for a completely dynamic platform and users are given choice to control most aspects of the page including the background color. I can see that your suggestion will work, however it scares me to death to see how I might have to multiply the size of my color definitions by at least 10 times (if not more) to do so! – smallworld Oct 12 '12 at 15:31
  • @smallworld you can just use `body .bgWhite a` instead, so you don't have to do it for any different combination – Giona Oct 12 '12 at 15:32
  • Well, I tried that - I hope I understand it correctly... please take a look at [link](http://jsbin.com/equnag/1/edit)! is that what you are referring to? It still didn't work for me. – smallworld Oct 12 '12 at 15:39
  • @smallworld nope, i'm referring to your original HTML, where `body` had the bgDark class. Check my edit & demo – Giona Oct 12 '12 at 15:54
  • Thanks a bunch for all your help, I sincerely appreciate everyone's time. I did look at your demo and it works! But when I add one more child element (as you can imagine, real world needs are far more complex), it seems to fail again! See here.... [update to your demo](http://jsfiddle.net/7fRbc/2/)! At the same time, if I move definitions used at the child node to the bottom, it obviously works - see here [this one works, but not practically enforceable in a dynamic system(http://jsfiddle.net/7fRbc/3/)! – smallworld Oct 12 '12 at 16:11
  • eheh @smallworld, you need to add a selector for any nested level, or re-organize completely your stylesheets! – Giona Oct 12 '12 at 16:15
  • Totally agree! We made a mistake of going too far on certain assumptions on how specificity would be calculated and are now paying price :-( Based on your earlier response, I am thinking of classifying various colors in a color scheme (total 7 possible colors) as either shadeDark or shadeLight, and then assign the link colors to this shades, and then create rules that define ".shadeDark .shadeLight a" or ".shadeLight .shadeDark a" - that will prevent our stylesheets from exploding into 10/20 times the size of current one. Thanks again. – smallworld Oct 12 '12 at 16:20
  • I see @smallworld, but i think that the best approach would be to load the body classes first, then the parent div, then the child ones and so on ;) good luck anyway! – Giona Oct 12 '12 at 16:52
  • I think I solved my problem. You may want to check out my post below to get a link to solution. Thanks for your and everyone else' help! – smallworld Oct 12 '12 at 21:17
1

Use more specific selectors. For example, adding "div" to your bgWhite rules will cause them to be used:

http://jsfiddle.net/8QfAa/

Read up on specificity here: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Jim
  • 2,300
  • 1
  • 19
  • 43
  • Jim, I tried a little variation of what you suggested because in our case, users are allowed to easily flip the bgWhite and bgDark positions so it could be bgWhite at the body or parent div level and bgDark at the child div level. Strangely enough this seems to work... [link](http://jsfiddle.net/8QfAa/1/)! - I have read up on specificity so much before but I guess its time for a refresher course. What is biting us is this part.... The last rule defined overrides any previous, conflicting rules. - I would think that because child div specifically assigns CSS all its children should inherit that – smallworld Oct 12 '12 at 15:44
  • Jim, unfortunately, this still doesn't work in the scenario we are trying to solve.... for some reason, it worked as long as I had bgWhite and bgDark, but in real life we have about 7 different color combinations in our color scheme that can be used by the non technical users and we dynamically assemble page using their configuration. Hmmm... not sure exactly how we will solve this or even if we can. You can see following link for a slight twist to an earlier example [link](http://jsfiddle.net/8QfAa/6/)! – smallworld Oct 12 '12 at 16:02
  • @smallworld It sounds like your use case might be a good place to use jQuery to dynamically set the classes/styles on various elements. Barring that, you can use the !important flag after a CSS rule to force priority, but that is bad practice except in certain limited circumstances. – Jim Oct 12 '12 at 16:04
  • I totally agree with you on use of !important - moreover it won't be possible for a complex CSS used in a dynamic page generation! I like your suggestion on JQuery and will definitely explore that, but meanwhile, I will continue pursuing current path to see if I can find a solution. If I do, I promise to post an update here as to how we solved. – smallworld Oct 12 '12 at 16:15
  • I think I solved my problem. You may want to check out my post below to get a link to solution. Thanks for your and everyone else' help! – smallworld Oct 12 '12 at 21:18
0

This is not a problem of inheritance, it's a problem about priorities.

both element are defined as .class element, so they are equally important. In such case, the CSS that will be used is the last one to be defined.

An easy way to add priority to one definition is to add something common in front.

Examples : 

html .bgWhite a { color:black; } 
html body .bgWhite a { color:black; } 
div.bgWhite a { color:black; } 
div.bgWhite a { color:black !important; } <- avoid if possible.
Kraz
  • 6,910
  • 6
  • 42
  • 70
0

After hours and hours of messing around, and based on pointers provided by @GionaF, I embarked on a quest to find a meaningful solution that didn't require bloated CSS files or use of JavaScripts to manipulate things.

I think I have nailed it! Posting the solution here to make sure this knowledge is available to the community if anyone else is trying to create a completely dynamic experience like we are, and is looking for a solution.

Check out this JSFiddle DEMO to see how I solved this problem. All in all, I attribute about 40 hours committed to researching/investigating before posting question here, and then additional 5 or so hours after posting question here. That's good 45 hours one could save and still attain an elegant solution! Hope this helps someone. Good luck!

smallworld
  • 910
  • 7
  • 15