Can I inherit from one class to another in CSS

Question

What I'm doing is creating multiple classes for different elements one is a hover class and the other is the non hovered version. Only one or two things change between the two classes and I don't want to have to copy and paste the whole class over and change just one line.

So what I'd like to do is say have

.hoverOff {
background-color: green;
font-size: 14pt;
border: 2px;
width: 150px;
}

And then I have a hover over class

.hoverOn {
background-color: red;
}

I want to inherit everything else from the hoverOff class and only change the background color. Can I inherit with CSS like that and overide inherited styles in the new class? As it stands right now I'm simply copying the entire class, renaming it and changing one line. Seems pretty redundant and archaic to me.

elements in the dom can have multiple classes. Create one with only the hover effect that is common and then different classes with just what changes between elements — Lelio Faieta, Jul 07 '17 at 15:23
I think someone already asked about it: https://stackoverflow.com/questions/5417356/inherit-css-class — Aksh, Jul 07 '17 at 15:23
just a note more than anything - `background-color` can be shortened to `background` and IMO it's better to use hexcode or rgba colour codes rather than the names — treyBake, Jul 07 '17 at 15:24
@ThisGuyHasTwoThumbs note that `background` is not the same as `background-color`. By doing `background: red` for example, you're setting the `background-image`, `background-repeat` and all other `background-*` properties to their default states, which may lead to some unintended behaviour. — Rory McCrossan, Jul 07 '17 at 15:26
@RoryMcCrossan true as that may be, I don't think in my time coding I've come across problems just using `background` (I've only been doing it for 3/4 years so I could be wrong and just been lucky as of yet) — treyBake, Jul 07 '17 at 15:27
I've had it a few times. It's a real 'gotcha', which is why I always use the full `background-*` properties now. — Rory McCrossan, Jul 07 '17 at 15:28

score 4 · Answer 1 · answered Jul 07 '17 at 15:24

You can do what you describe in the question, however it's much simpler to just use CSS to take care of the hover state for you using the :hover pseudo selector. Try this:

.foo {
  background-color: green;
  font-size: 14pt;
  border: 2px;
  width: 150px;
}

.foo:hover {
  background-color: red;
}

<div class="foo">
  Hover over me
</div>

zessx · Answer 2 · 2017-07-07T15:26:45.723

2

In pure CSS, simply use both classes in your first selector:

.hoverOff,
.hoverOn {
  font-size: 14pt;
  border: 2px;
  width: 150px;
}
.hoverOff {
  background-color: green;
}
.hoverOn {
  background-color: red;
}

Anyway, unless you're doing some JS advanced magic, I would recommend to use :hover, as stated in this answer.

edited Jul 07 '17 at 15:26

answered Jul 07 '17 at 15:23

zessx

68,042
28
135
158

@ThisGuyHasTwoThumbs I had a typo when I first published. – zessx Jul 07 '17 at 15:25
1

Because [this](https://stackoverflow.com/a/44974489/1541563) is the correct route to go. – Patrick Roberts Jul 07 '17 at 15:25
@zessx ah I see - and @ patrick it isn't necessarily the correct, maybe just more efficient, this also works^ – treyBake Jul 07 '17 at 15:26
1

"This also works" - yes, but it's a mess to maintain, which even [this](https://stackoverflow.com/a/44974507/1541563) would make more sense, if you don't want to use `:hover`. I downvoted this because I wouldn't recommend it to anyone. – Patrick Roberts Jul 07 '17 at 15:29
@PatrickRoberts I would never use this kind of code, and I agree the `:hover` solution is the one to go, but I think the CSS multiple selector may help OP. – zessx Jul 07 '17 at 15:34
@zessx here's your chance to revenge downvote if you feel my answer isn't adequate :P – Patrick Roberts Jul 07 '17 at 15:35
@PatrickRoberts Not there to fight, and I fully understood your downvote :) (and nice answer!) – zessx Jul 07 '17 at 15:38

score 1 · Answer 3 · answered Jul 07 '17 at 15:25

Copying the entire class should be the last option, if an option at all.

What I would do is something like this:

.element {
    background-color: green;
    font-size: 14pt;
    border: 2px;
    width: 150px;
}

.element.on {
    background-color: red;
}

.element:hover may make more sense; my answer is more about how to share CSS styles.

Alternatively, you could assign the same styles to multiple classes like this:

.element.on, .element.off {
    background-color: green;
    font-size: 14pt;
    border: 2px;
    width: 150px;
}

.element.on {
    background-color: red;
}

Lastly, CSS pre-compiler languages have features like Mixins in Less, where you can assign a class by name to another class.

score 1 · Answer 4 · answered Jul 07 '17 at 15:35

If you want to consider inheritance in the most literal sense, check out CSS variables. Though I wouldn't use this in production code, it's an interesting feature that allows some cool things:

.foo {
  --bg-color: green;
  background-color: var(--bg-color);
  font-size: 14pt;
  border: 2px;
  width: 150px;
}

.foo:hover {
  --bg-color: red;
}

<div class="foo">
  Hover over me
</div>

Can I inherit from one class to another in CSS

4 Answers4