-1

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!

Dalija Prasnikar
  • 24,159
  • 30
  • 74
  • 140
D7460N
  • 11
  • 6
  • Apparently not... https://stackoverflow.com/a/6930049/1772933 – Kinglish May 19 '21 at 18:48
  • For a JS solution you could put a mutationObserver on the class attribute of component01's children and if one is observed test for its now containing content-loaded and add a style for .component02 .loading-complete-message to display:block. (Are the children direct descendant? If not, some iteration required). – A Haworth May 19 '21 at 19:34

1 Answers1

0

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;
}
NeilWkz
  • 237
  • 1
  • 8