Following multiple ID / Class rules in CSS - css

Question

I'm trying to have a scrolling banner on the index page which has multiple sub-properties but, the main property of:
height: 75vh;
On all following pages I would like the same banner to have all the other rules that apply to it, but only have the height different:
height: 30vh;
This would allow both banners to follow all the same rules for remaining mobile responsive - ie they both still come under the id="banner".
One easy fix for this would be to label one id="bannerX" and one id="bannerY" and then just copy all the subsequent CSS under the corresponding X or Y. For example:
#bannerX {
background-color: #444;
color: #fff;
min-height: 40em;
height: 75vh;
position: relative;
}
#bannerX input, #banner select, #banner textarea {
color: #fff;
}
#bannerX a {
color: #fff;
}
#bannerX strong, #banner b {
color: #fff;
}
and so on...
versus
#bannerY {
background-color: #444;
color: #fff;
min-height: 40em;
height: 30vh;
position: relative;
}
#bannerY input, #banner select, #banner textarea {
color: #fff;
}
#bannerY a {
color: #fff;
}
#bannerY strong, #banner b {
color: #fff;
}
and so forth...
But that just leads to a duplication of a lot of CSS that is the exact same, just the original ID is changing one rule within it. This would work but just seems a really messy way around it. I'm sure there must be a better way of working this but I can't seem to make it work. I've tried adding in a class="banner-thick" or class="banner-thin" to each within their own section but that didn't seem to work either because then neither banner follows the original id="banner" rules because they're now id="bannerX" or id="bannerY"! I can't seem to make it work! Does anyone have an idea of how I can fix this?
I suspect there's a simple fix and I just can't see the wood from the trees!
Thanks all.

Answer 1

Use multiple class like this - class="bannerX height1" for 1st one. For 2nd one use class="bannerX height2". Where height only holds the value of heights. No need to use heights in bannerX.
CSS
.bannerX {
background-color: #444;
color: #fff;
min-height: 40em;
/*height: 75vh;*/ as we define different heights in height1 & height1 class
position: relative;
}
.height1 {
height: 75vh;
}
.height2 {
height: 75vh;
}
HTML
<div class="bannerX height1">
</div>
<div class="bannerX height2">
</div>