CSS inheritance skipping with `inherit(N)` CSS function


#1

I’d like to propose introducing the concept of inheritance skipping. I have encountered many situations building web interfaces which would have benefited from such a feature.

I readily admit that every one of these situations I encountered would now be solvable using custom properties, however, I still believe that the concept would be useful to reduce the complexity of a design.

Take for example, this admittedly contrived situation of using a ::before to display “$” unit on a monetary amount.

<p>The cost is:</p>
<p class="cost">10</p>

<p>You saved:</p>
<p class="cost saved">5</p>

<style>
html {
  color: #000;
}

p {
  margin: 0 0 1rem;
}

p.cost {
  color: red;
}

p.cost.saved {
  color: green;
}

p.cost:before {
  content: "$";
  color: #000; /* Wish I could instead write `inherit(1)` */
}
</style>

jsFiddle

The rub is that I want to display the “10” in a color (red or green) to express money lost or gained but still be able to display the ::before pseudo-element using what would have been the inherited color.

So one way to solve this would be to introduce an inherit(N) function in which N represents the number of additional parents to traverse up to to grab the inherited property, stopping at html if it were to go too far.

The inherit keyword would of course stay and therefore be equivalent to inherit(0).

Again, no doubt this and other similar situations could be accomplished using --custom-properties, but I think that the idea of being able to inherit from one or two parents up would reduce the code complexity of a design in which a custom property were sort of overkill. I hope this “$10” example comes close to expressing that.

[Edit: an earlier version of this used an example with changing font size. I switched the example to use colors instead to avoid the confusion with the interplay of inheritance and em.]