How to tell CSS to 'use next most specific rule to determine this property'

Question

I'm using Material-UI and JSS to manage my CSS, and I've run into an issue where the styles differ between development and production.

The reason this appears to be - is that the order of the rules in file must be different.

ie. for an element <div class = "foo bar"/> in development the stylesheet looks like :

.foo {
    color: red; 
}

.bar {
    color: blue; 
}

while in production it will look like:

.bar {
    color: blue; 
}

.foo {
    color: red; 
}

causing them to look different.

What I'm wondering is if for the .bar rule I can apply something like color: unset, to tell CSS - 'Ignore me, let any other rules set this'.

.bar {
  color: blue; 
}

.foo {
  color: red; 
}

p.foo {
  /*do what here?  I want the color to be blue, without explicitly setting it this way*/
}

<p class = "foo bar">
   hello world!
</p>

Your examples are kind of confusing. In the first section you have `.bar` setting the color to blue but want it to be overridden. But in the second section you have `.bar` setting the color to green and want `.foo` to be overridden. Can you change the examples to be consistent so it's clearer what you want the outcome to be? — Scott Schupbach, Jan 06 '20 at 01:24

Scott Schupbach · Answer 1 · 2020-01-06T01:42:27.323

If I'm understanding correctly, you want .bar elements to have color blue and .foo elements to have color red, but when both are used, you want the color to be blue. If so, you just need to make the .bar rule more specific than the .foo rule. You could do this in a number of ways.

One would be to create a rule that explicitly covers the case where both classes are used simultaneously. This will ensure that the correct color is always used in those cases:

.foo.bar { 
  color: blue;
}

Alternately, you could identify the specific tags that .bar can appear on and create rules for each case. This will give those rules higher specificity and they will win out over the less specific .foo rule:

div.bar,
p.bar, 
h1.bar {
  color: green;
}

Also, in case CSS specificity is an unfamiliar concept, CSS Tricks and MDN have good explanations.

How to tell CSS to 'use next most specific rule to determine this property'

1 Answers1