Can you make the distance between selectors matter for specificity in CSS?

Issue

Originally split off from this question.

If I use this css, the span's text color is determined by its closest parent (i.e. text is blue):

.blue {
    color: blue;
}

.green {
    color: green;
}

<div class="green">
    <!-- more divs with color classes -->
        <div class="blue">
            <div>
                <!-- Unknown depth without color classes -->
                    <div>
                        <div class="my-component">
                            <span>Hello World</span>
                        </div>
                    </div>
                <!-- -->
            </div>
        </div>
    <!-- -->
</div>

However, I want this behavior for .my-component specifically. I therefore added .my-component to my selector but suddenly, the span's text color is determined by the definition order (i.e. text is green):

.blue .my-component {
    color: blue;
}

.green .my-component {
    color: green;
}

<div class="green">
    <!-- more divs with color classes -->
        <div class="blue">
            <div>
                <!-- Unknown depth without color classes -->
                    <div>
                        <div class="my-component">
                            <span>Hello World</span>
                        </div>
                    </div>
                <!-- -->
            </div>
        </div>
    <!-- -->
</div>

I understand why this is (specificity; see Can a component be styled based on its closest parent in pure CSS?) but would like to know how to work around it.

Is there a way to get the second example to behave as the first (only using CSS/HTML)?

Solution

Use CSS variables. The closest class will override all the previous ones and win the game.

.blue {
    --c: blue;
}
.green  {
    --c: green;
}

.my-component {
  color: var(--c);
}

<div class="green">
    <!-- more divs with color classes -->
        <div class="blue">
            <div>
                <!-- Unknown depth without color classes -->
                    <div>
                        <div class="my-component">
                            <span>Hello World</span>
                        </div>
                    </div>
                <!-- -->
            </div>
        </div>
    <!-- -->
</div>

Answered By - Temani Afif