1

I'm not sure how this works, but essentially I have two sections in my styling:

.my-class-1 .my-subclass-1 .this-class {
      background: #6a98e8;
}

.my-class-1 .my-subclass-1  .my-subclass-2 .this-class {
      background: #6a98e8;
}

Is there a way to condense this into one style? Ideally I'd want my-subclass-2 to be optional, as I want the same result for this-class regardless of the two setups.

The style depends on there being my-class-1 and my-subclass-1, but after that I want to essentially not care about any further children between them and this-class.

user1539405
  • 91
  • 1
  • 11

1 Answers1

2

You can do this by comma (,) operator, like this:

.my-class-1 .my-subclass-1 .this-class,
.my-class-1 .my-subclass-1 .my-subclass-2 .this-class {
  background: #6a98e8;
}

The above property is functionally equivalent to this:

.my-class-1 .my-subclass-1 .this-class {
  background: #6a98e8;
}

.my-class-1 .my-subclass-1 .my-subclass-2 .this-class {
  background: #6a98e8;
}
SMAKSS
  • 8,547
  • 3
  • 16
  • 32
  • Thank you. so I just need it all still. There's no way to indicate that after my-class-1 and my-subclass-1 I do not care for the further parents between them and the my-class element? – user1539405 Aug 03 '20 at 10:44
  • @user1539405 You should just repeat the exact same order for each of them and there is no way to shorten them in CSS unless you use preprocessors like SASS or SCSS. – SMAKSS Aug 03 '20 at 10:46