Can a component be styled based on its closest parent in pure CSS?

August 19, 2022

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

.red {
    color: red;
}

.blue {
    color: blue;
}

.green {
    color: green;
}

<div class="green">
    <div class="red">
        <div class="blue">
            <div class="my-component">
                <span>Hello World</span>
            </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):

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

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

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

<div class="green">
    <div class="red">
        <div class="blue">
            <div class="my-component">
                <span>Hello World</span>
            </div>
        </div>
    </div>
</div>

Why is this?

EDIT

Ok, so I messed up a bit here. As noted in the comments, I was mostly surprised that the distance between .red and .my-component did not affect specificity. However, my second question was the one I was really interested in. This question has already received a lot of great answers to the first question, so I’m reverting this question to its original state and will split the second question off into a new one. Thank you all for the great answers!

>Solution :

Given that the question was (originally) titled: "Can a component be styled based on its closest parent in pure CSS?" and looking at the original examples given
you can do it like this:

.red > .my-component {
    color: red;
}

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

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

<div class="green">
    <div class="red">
        <div class="blue">
            <div class="my-component">
                <span>Hello World</span>
            </div>
        </div>
    </div>
</div>

The > demands a direct parent-child relationship. A "grandparent" will have no effect on the target element’s formatting.

However, the above snippet will not work if the target div is placed several levels under the innermost "colored" div.