Pure CSS solution for detecting presence of child selector?

Hello dev.to community!

Thankful for you! Articles are very helpful. Learning so much!

Trying to leverage CSS's "live-ness" (rather than JS poling) to detect the presence of a dynamically loaded child selector to change it's parent's sibling's width per the below scenario and CSS.

Problem is that the CSS relational pseudo-class ":has" is not supported by any browsers yet.

Would CSS variables or a pre-processor be able to handle the below scenario? Not used them yet.

Probably making this too complicated. Open to more efficient ways/techniques.

Any assistance is much appreciated.

Thanks again for all that you do for our community!

---

Scenario : :

Classic left to right master-detail, holy grail layout, using Bootstrap/Flexbox.

1. End-user clicks a list item in .results.
2. Dynamic content is loaded into .details.
3. .loaded class is loaded LAST into .details.
4. The "Open State" CSS rule becomes TRUE.
5. .details slides in from the right.
6. End-user clicks "X" to close .details.
7. .loaded is removed from .details.
8. The "Open State" CSS rule becomes FALSE.
9. .details reverts to it's "Closed State" (default).
10. .details slides out to the right.

Hope that makes sense...

---

CSS : :

/* Closed State (default) */
.results {
     flex: 0 0 auto;
     width: 0;
     transition: width 550ms ease;
}
/* Open State */
.details .loaded {     
     .results {          
          width: 25%;
     }
}

HTML : :

<div class="results">
     <div class="list-of-results"></div>
</div>

<div class="details">
     <div class="dynamically-loaded-content **loaded**">

     </div>
</div>

                               '
             ( ON SCRN )       ' ( OFF SCRN )
                               '             _[ close btn ]
 _____ ________.results________'__.details__/
|     |                        |           x| 
|     |                        |            | When the child class
|     |                        | + .loaded  | '.loaded' is present in
|     |                      <-|---         | '.details', '.details' slides
|     |                        |            | on screen from right
|     |                        |            | 
|     |                        |            |
|     |                        | - .loaded  | When '.loaded' disappears
|     |                      --|-->         | '.details' slides off screen
|     |                        |            |
 ----- ------------------------ ------------