How can i hide a class - css

Question

I'm using a CSS layout on both html page.
I want to use the same style except I want to hide/disable other classes made for it for the second html page and still use the others on the first html page.
Situation:
class="firstClass" has the fonts and style I wanted with it but has other classes and styles that shows when I use that class.
I tried getting the other classes by adding a secondClass on the same level of the first class, then did this:
.firstClass .secondClass, .dontWant1 .dontWant2 {
display:none;
}
Problem is it also hides on the first html.

Answer 1

You can have multiple classes on one element. That said, you add classes on one page that you dont add on the other page, to show elements on page 1 and hide them on page 2.
You can have that one class show or dontshow to define what elements are visible.
Then you add a class to define your styles.
HTML/CSS:
.greenbox {
background-color: green;
width: 100px;
height: 100px;
}
.redbox {
background-color: red;
width: 20px;
height: 20px;
}
.show {
display: block;
}
.dontshow {
display: none;
}
<div class="greenbox">
<div class="show">
<div class="redbox">
<!-- red box visible -->
</div>
</div>
<div class="dontshow">
<div class="redbox">
<!-- red box not visible -->
</div>
</div>
<div class="dontshow redbox">
<!-- red box not visible -->
<!-- exactly the same outcome as the above without the wrapping div -->
</div>
</div>

Answer 2

You can try this:
html:
<div class="main">
content goes here.
</div>
<div class="main active">
content goes here.
</div>
css:
.main {
background-color:yellow;
display:none;
}
.active {
display:block; OR display:block !important;
}