Martin AJ Martin AJ - 3 months ago 7
CSS Question

How can I exclude a classname from parent's properties?

I have a class like this:

li {
color: #ccc;
font-size: 12px;
position: fixed;

/* and some other properties */
}


Now I have this element that I want to exclude those properties above on it:

<li class="has_not_any_property"></li>


Is doing that possible?

Answer

Just use :not property.A negation pseudo class

li :not(.has_not_any_property) {
        color: #ccc;
        font-size: 12px;
        position: fixed;
    }

For older browsers that do not support CSS3 you can just give the inital or inherited values using unset

From the documentation

https://developer.mozilla.org/en-US/docs/Web/CSS/unset

This keyword resets the property to its inherited value if it inherits from its parent or to its initial value if not. In other words, it behaves like the inherit keyword in the first case and like the initial keyword in the second case.

li.has_not_any_property {
    color:unset;
    position: unset
    font-size: unset;
}
Comments