How to nest multiple css attributes inside another attribute - css

Question

I am getting an html file as a string and I need to change the styling that are coming in to prevent it from changing the parent styling.
Instead of going through each style and changing it from
.inner-div{height: 50px;}
to
.outter-div .inner-div{height: 50px;}
on each element, I would like to do something like
.outter-div {
.inner-div{height: 50px;}
.inner-div2{height: 50px;}
}
however that does not work
Is there a way to have multiple attributes nested inside of another attribute, instead of having to add the parent on each attribute?

Answer 1

To do something like that, you'd have to use a CSS pre-processor.
Two popular candidates are Less and Sass.
Less and Sass extend CSS to provide extra features, including the ability to nest multiple attributes. This Less or Sass code is then fed into a pre-processor, which transforms it into standard CSS that a browser understands and can be deployed as part of your website or app.

Answer 2

Assuming the inner class names all start the same (with 'inner'), then this can be done with an attribute selector. like this:
.outer-div [class^=inner] {
height: 50px;
}
Demo
If this is not the case, then...use a CSS preprocessor like others have mentioned.
PS: just for the record...
CSS selectors level 4 has added the :matches pseudo-class in order to group selectors more easily.
The syntax looks like this: :matches( selector[, selector]* )
In your case, it would be:
.outer-div :-matches(.inner-div, .inner-div2 ) {
height: 50px;
}
You can read more about it this CSS-tricks post
NB:
Currently there is no browser support for :matches, however the :matches pseudo class was once called :any in the spec, supported with -moz- and -webkit- prefixes. See MDN on :any
Here's a working example for webkit using :any:
Codepen