How to nest selectors within a class

Question

I want to change the attributes for all items within a particular block item dynamically. I envision the css having a structure as below, but can't figure out the exact syntax to do it. I would change the class id of the block items, ie. cls1 and cls2, dynamically with javascript or similar.

.cls1 {x: y=z1; ...
     h1 {}
     p {}
     img {}
     a {} ...
    }
.cls2 {x: y=z2; ...
     h1 {}
     p {}
     img {}
     a {} ...
    }
- - - - - - - - -
<div class="cls1">
    ...
    </div>

What you're looking for is [Sass stylesheets](https://sass-lang.com/), which are compiled before publication. — esqew, Aug 26 '19 at 14:53

score 0 · Answer 1 · answered Aug 26 '19 at 14:55

With straight CSS, the syntax would look like this:

.cls1 h1 {
  ...
}

.cls1 p {
  ...
}

.cls1 img {
  ...
}

.cls1 a {
  ...
}

.cls2 h1 {
  ...
}

.cls2 p {
  ...
}

.cls2 img {
  ...
}

.cls2 a {
  ...
}

With a CSS pre-compiler like SASS, you can use the syntax that you have in your question.

.cls1 {
  h1 {...}
  p {...}
  img {...}
  a {...}
}

.cls2 {
  h1 {...}
  p {...}
  img {...}
  a {...}
}

How to nest selectors within a class

1 Answers1