CODEWITHSUNDEEP
htmlcss
Martin AJ
Martin AJ

Reputation: 6697

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?

Upvotes: 1

Views: 91

Answers (2)

George Pant
George Pant

Reputation: 2117

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;
}

Upvotes: 1

Daniel Langemann
Daniel Langemann

Reputation: 540

Use the CSS not pseudo-class:

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

Documentation here: https://developer.mozilla.org/en-US/docs/Web/CSS/:not

Upvotes: 1

Related Questions