and further I want to cancel this rule without changing this css file but in another css file. I want the links in the .tab element to be styled according to rules higher up in hierarchy as if this color: inherit did not exist. So far the only way I’ve found is to set the color explicitly again, for example:
.tab a {
color: orange;
}
But in this case I have to repeat the same colour that was specified in another css file and it also has other issues like cancelling any previous :hover styles, etc. so there may be even more stuff to repeat. I was hoping for some special keyword like none, auto, etc. but there doesn’t seem to be any. The idea is I don’t want to change css provided by a framework but add my own modifications in another css file that is loaded later in the document.
Well this is the nature of the “cascade” of cascading style sheets (CSS). Rules which follow other rules can override the ones that came previously. What you show in your example is typically what you would do. In the CSS file following the first, you override the value by setting it to “orange”. If you want to set the color back to whatever was before inherit was encountered, you would have to manually set it back to what the first value was.
As far as I know this is all you can really do if you can’t touch the original file. If you could modify the first file, you might try structuring the CSS rules in a different way like putting the color in its own class separate from the tab and be able to add the class onto any tab you want to be the original color.
But what you describe is simply fighting against the cascade which is not how it works.
Agree with what @Martyr2 states. Cascading rules work like that. The last instruction for the same selector will take effect.
If that override is in a separate file, and you only include it on the pages you want it to run, then it should work the way you want it to. The other option would be to add a secondary class to that link so that it only runs in certain situations. Something like
.tab a.special {
color: orange
}
<div class="tab">
<a class=special" href='#'>This will be orange</a>
</div>
I can’t actually think of a situation where this would be much of an issue?
If you want your rules to win out then place them later in the cascade (and with correct specificity).
In your example the inherit rule seems to be the override if you have already defined styles previously.
For example in bootstrap you would have all the default rules first and then you create a custom style sheet for all your overrides and have that last week in sequence.
In your example you seem to have some styles to start with and then an override ( the inherit) and then another override to override the override
You probably could simplify it using a css variable as your second override but you’d still need to remember what the variable was called
Notwithstanding all the above it seems that you are asking for something like revert layer.
Unfortunately it is just experimental.
That would be an issue of specificity.
The following hover rules are still red.
‘’’
body{color:green}
a:hover{color:red}
a {color:inherit}
‘’’
