Use some CSS properties in many selectors without editing HTML or using JS

Question

CSS:

.bananaTrans {
  -moz-transition : all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  transition : all 1s ease-in-out;
}
.bananaClass {
  color: yellow;
}

HTML:

<div class="bananaClass">Banana Banana Banana</div>

The objective is to make every element that has class "bananaClass" inherit the properties of "bananaTrans" without editing the HTML or using JavaScript.

It ("bananaTrans") don't need exactly to be a class, it's just a bunch of properties to be used amongst other selectors.

Answer 1

You can modify the CSS? Just add an extra .bananaClass selector

.bananaTrans, .bananaClass {
  -moz-transition : all 1s ease-in-out;
  -webkit-transition: all 1s ease-in-out;
  transition : all 1s ease-in-out;
}
.bananaClass {
  color: yellow;
}