Exclude a class and all of its children-CodePudding

I am loading global CSS styles but I need them to not affect one part of the page and all of its subcomponents. There are some old information but is there a solution now when :not() is a

<div >
    <div >
        <div >
            <div >
                Should be red
            </div>
        </div>
    </div>
    <div>
        <div >
            <div >
                Should be lime
            </div>
            <div >
                <div >
                    Should be lime
                </div>
            </div>
        </div>
    </div>
</div>

.parent:not(.child-lime) {
    .block {
        background: red;
    }
}

/* Block is an example, in reality we don't know the class name */
.block {
    height: 100px;
    width: 100px;
    background: lime;
    border: 1px solid #000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

I have tried different combinations with :not() selector but with no luck. It works when I don't need to include all children.

CodePudding user response：

add this into CSS file

.parent > ._filler .block {
    background: red;
    }
    
    .child-lime .block {
        background: lime;
    }

remove this from CSS file

.parent:not(.child-lime) {
    .block {
        background: red;
    }
}

CodePudding user response：

Your question seems to be missing some details, but here's what gets you close (assuming you can't touch the underlying HTML)

.parent {
    div:not(.child-lime .block) {
        background: red;
    }
    .block {...}
}

There's an un-classed div element that turns red...but since your comments seem to require not touching the underlying HTML and using the :not pseudo, that's probably as close as you can get.