Unset css property in css. Is it possible? - html

Question

Unset css property in css. Is it possible?
Let me explain the problem with the css code.
We have two classes at hand: .whenRolledUp and .whenRolledDown.
I want my element to comply with the following rules:
1 When an element with .whenRolledUp class is positioned in DOM hierarchy and have an element with a class .rolledDown somewhere above itself in the hierarchy I would like to disable the element. Otherwise, I would like to do nothing to the display of the element. I am able to satisfy this with the help of this css:
.rolledDown .whenRolledUp {
display: none;
}
2 When an element with .whenRolledDown class is positioned in DOM hierarchy and have an element with a class .rolledDown somewhere above itself in the hierarchy I would like to do nothing to the display of element. Otherwise, I would like to have display: none for the element. I am able to satisfy the second part using this:
.whenRolledDown {
display: none;
}
But here is the catch. I can not satisfy the first part by just using this:
.rolledDown .whenRolledDown {
display: block;
}
Because here I am actually setting the display to block, while it may have a different value without this css.
It seems like the problem is impossible to solve with only css. Is it so?

Answer 1

You can use display: unset:
The unset CSS keyword resets a property to its inherited value if it
inherits from its parent, and to its initial value if not.
function add() {
document.querySelector('.target').classList.add('rolledDown');
}
.whenRolledUp {
display: none;
}
.rolledDown .whenRolledUp {
display: unset;
}
<div class="target">
<div class="whenRolledUp">whenRolledDown</div>
</div>
<button onClick="add()">Add rolledDown</button>