JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>Element1
    <ul>
        <li>Element1</li>
        <li>Element2</li>
        <li>Element3</li>
        <li>Element4</li>
    </ul>
    </li>
    <li>Element2
    <ul>
        <li>Element1</li>
        <li>Element2</li>
        <li>Element3</li>
        <li>Element4</li>
    </ul>
    </li>
    <li class="exception">Element3.exception
    <ul>
        <li class="blue">Element1
        <ul>
            <li class="peach">Element1</li>
            <li class="yellow">Element2</li>
            <li class="brown">Element3</li>
            <li class="gray">Element4</li>
        </ul>
        </li>
        <li class="purple">Element2</li>
        <li class="orange">Element3</li>
        <li class="green">Element4</li>
    </ul>
    </li>
    <li>Element4
    <ul>
        <li>Element1</li>
        <li>Element2</li>
        <li>Element3</li>
        <li>Element4</li>
    </ul>
    </li>
</ul>

CSS

/* EXPLANATION: I want to exclude any styles at all to be applied to any od li.exception descendants! The solution is not good if I have to apply the styles first and then override it to its initial values! */
/* INITIAL */li{background-color:white}
/* INITIAL */.blue{background:blue}
/* INITIAL */.peach{background:peachPuff}
/* INITIAL */.brown{background:brown}
/* INITIAL */.yellow{background:yellow}
/* INITIAL */.gray{background:gray}
/* INITIAL */.purple{background:purple}
/* INITIAL */.orange{background:orange}
/* INITIAL */.green{background:green}

/* Example: I wan't to apply orange background to all the elements except li.exception and its descendants. The problem is that it works only for li.exception but not for its descendants */
*:not(.exception){
    background-color:orange !important; /* override all the elements */
}