CSS Class inheritance

HTML-CSS
1

Is there a way to have a CSS class inherit from another class in the CSS itself?

Example: I want .img-1 to inherit everything from .img without having to put both .img and .img-1 in the element class of the HTML code

 .img { 
stuff: value;
}
.img-1 {
more stuff: value;
}
2

This sounds like the kind of inheritance in Object-Oriented programming, if I understand you correctly. In CSS a child can inherit from a parent and sometimes farther back just like in a family tree. However sometimes you may have to specify inherit: mostly it just happens. For example:

body {
background-color: white;
color: black;
}

can set that style throughout the document. Unless it is overwritten later for a particular section. Images are just “inline” elements like span and don’t have a parent-child relationship.

3

Yeah, that’s basically what I’m trying to do. I was hoping to be able to specify something in the CSS code similar to this:

.img1 {
   .img;
   stuff: value;
   }

^ not real code, but I was wondering if there was a way to accomplish that.

4

In the fake code you posted is .img1 a parent of .img? Using something like SASS/SCSS you can do nesting.

5

In the fake code, .img is the parent, and .img1 would be inheriting from it.

6

No, it would have to be the other way.

There are some rules for inheritance, but broadly speaking the children element will inherit from the parent element.

And then using a CSS Preprocessor like SCSS you can do nesting. There are also functions and mixin/include which lets you bring in functionality/CSS you can then use in other style blocks.