Imagine having the following structure:
<div class="building">
<p>...</p>
<div class="room">
<p>...</p>
</div>
</div>
<div class="building">
<p>...</p>
<div class="room balcony">
<p>...</p>
</p>
</div>
CSS:-
.building .room { /* Apply some styles here */ }
.balcony { /* Define different styling here */ }
Now, suppose you want the div with classes room and balcony to only consider the balcony class and not the styles of building or room. Is there a way to achieve this? In a more complex scenario, using !important for overriding just one class won't suffice due to numerous classes with various styles.
How can this desired effect be accomplished?