How do you make a css class inherit all values from another class without changing the original class

Question

I am trying to import a website into OBS Studio via the browser source. Unfortunately the website I am importing is set to light theme via giving the html element of the website the class tw-root--theme-light.

This can be changed very easily by changing this class to tw-root--theme-dark but OBS Studio does not let you edit the html. I can only append CSS.

Is it possible to overwrite the class tw-root--theme-light to inherit all of its values from tw-root--theme-dark?

GBra 4.669 · Accepted Answer · 2021-03-01T17:20:52.447

There is no way to inherit all values from another class in pure CSS.

CSS inheritance is from parent element to child element, this doesn't apply for rulesets such as CSS classes.

We can achieve this, with CSS preprocessors such as Sass & LESS, by extending the classes:

example in Sass (with SCSS syntax):

.block {
  display: block
}
.green {
  background: green
}

.green-block {
  @extend .block; // in LESS, the syntax would be the same but without @extend
  @extend .green; // in LESS, the syntax would be the same but without @extend
}

I would just use those CSS classes but override with the new CSS classes all the styles that you need to override.

If you need to inherit all the styles from the CSS class, just use the same CSS class twice and, if necessary, create a new class to override the styles that you don't need.

How do you make a css class inherit all values from another class without changing the original class

1 Answers1