'Inherit Bootstrap table stripe color

My Razor component populates a number of divs to a container.

Is it possible to inherit the table-stripe color and apply it to my divs (odd) rather than overriding it?

Or, if I declared a new CSS class "Div-Stripe-Row".

Is it possible to reference the background-color from Bootstrap's table-striped background-color (use what's already there) rather than declaring a new color (overriding it by just copying what the color is)?



Solution 1:[1]

Unfortunately, CSS does not provide 'inheritance' in the way that programming languages like C++, C#, or Java do. You can't declare a CSS class and then extend it with another CSS class.

However, you can apply more than a single class to a tag in your markup ... in which case there is a sophisticated set of rules that determine which actual styles will get applied by the browser.

See https://stackoverflow.com/a/1065476/3842598

The accepted answer says:

There are tools like LESS, which allow you to compose CSS at a higher level of abstraction similar to what you describe.

Less calls these "Mixins"
...

See https://stackoverflow.com/a/1065476/3842598

Solution 2:[2]

Your question may be a duplicate of this one.

Unless you want to use LESS, I would recommend adding a class to those divs and copy the styles of the Razor component to that class.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Christian
Solution 2 Genevieve McAllister