[Proposal] Break CSS rule propagation

Use case: isolation of propagation of class modifiers in nested components of the same class

Proposal explained in the example below

<style>
    .xtable .xtable-item .xtable-cell { /* rule-a */
        font-size: 12px;
    }
    /* example of proposed pseudo class to break propagation
 for css rule after we meet child element that match selector inside :break() */
    .xtable.modifier:break(.xtable) .xtable-item .xtable-cell { /* rule-b */
        border: 1px solid red;
    }

</style>

<div class=”xtable modifier”>
    <div class=”some-unnecessary-wrapper”> 
        <!-- 
            use case is to add any amount of wrappers in-between 
            so we can't use child combinator (>) like .xtable.modifier > .xtable-item > .xtable-cell
        -->
        <div class=”xtable-item”>

            <div class=”xtable-cell”><!-- applied rules: rule-a, rule-b -->
                123
            </div>

            <div class=”xtable-cell”> <!-- applied rules: rule-a, rule-b -->

                <div class=”xtable”> <!-- breaks propagation for rule-b -->
                    <div class=”xtable-item”>
                        <div class=”xtable-cell”> <!-- applied rules: rule-a -->
                            abc
                        </div>
                    </div>
                </div>

            </div>

            <div class=”xtable-cell”> <!-- applied rules: rule-a, rule-b -->

                <div class=”xtable modifier”> <!-- breaks propagation for rule-b; 
                                                  rule-b starts applying again from here-->
                    <div class=”xtable-item”>
                        <div class=”xtable-cell”> <!-- applied rules: rule-a, rule-b -->
                            abc
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </div>
</div>

Isn’t .xtable.modifier .xtable .xtable-item .xtable-cell sufficient?

But what if there will be .xtable.modifier inside .xtable inside .xtable.modifier

.xtable.modifier .xtable .xtable-item .xtable-cell will override it

Sure we can always mirror all html structure in css but what if i dont know the exact html structure in advance

Imagine that you need to have possibility to make infinite nesting of some component and need to apply some modifiers to it’s style but cant change css code at all, all css rules should be descrbed beforehand

In addition you can’t use child combinator (>)

As i know such task cannot be resolved with the current CSS standard

https://drafts.csswg.org/css-cascade-6/#scoped-styles

that’s what i was looking for back then