Pure CSS solution for detecting presence of child selector?
#css#flexbox#layout#variables
D7460N

D7460N @d7460n

About: UI/UX SME 25+ yrs designing/developing the wild wild web

Location:
United States
Joined:
Apr 16, 2019

Pure CSS solution for detecting presence of child selector?

Publish Date: Nov 21 '19
6 0

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%;
     }
}
Enter fullscreen mode Exit fullscreen mode

HTML : :

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

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

     </div>
</div>
Enter fullscreen mode Exit fullscreen mode 
                               '
             ( 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
|     |                        |            |
 ----- ------------------------ ------------
Enter fullscreen mode Exit fullscreen mode

Comments 0 total

    Add comment