Listening for child selector

Question

CSS is amazing in that it is inherently reactive. It activity listens for true/false rules. So how can I get CSS's reactiveness to change a (cousins?) child selector?

Something like this...

    .loading-complete-message {
        display: none;
    }
    
    body .container .component01 .content-loaded /* rule */
    {
        body .container .component02 .loading-complete-message /* targeted selector */
        {
            display: block; /* change */
        }
    }

When .component01 dynamically receives the child selector .content-loaded, change the .component02 child selector .loading-complete-message to display: block.

Is this possible with CSS only?

Is there a vanilla JS equivalent?

Google searches seem to indicate that only frameworks can do this...

There has got to be a minimal, lightweight, cross-browser (not IE) way to do this without employing an all encompassing monolithic framework, it's dependencies, build processes, and hours of ramp up time just to enable this single yet powerful capability in IMHO.

Any help would be appreciated.

TIA!

Answer 1

Not exactly but if you can add the .content-loaded class to the .component01 then a combination of a composite selector & adjacent selector should help here

.component01.content-loaded + component02 .loading-complete-message {
    display: block;
}