Hey there. Can media queries be used to detect a CSS selector to affect change?
Example:
When the .loaded class is dynamically loaded somewhere in the parent “.profile”, the adjacent parent “.results” changes width from 0 to 25%.
Maybe something like…
/* Closed State (default) */
.results {width: 0;}
/* Open State */
@media (width = 100% ) { /* Whatever rule that allows the this media query to be true all the time */
.details .loaded { /* If .loaded class appears in the parent .details */
.results {
width: 25%; /* Change adjacent parent .results to width 25%. */
}
}
}
HTML:
<div class="results">
<div class="list-of-results"></div>
</div>
<div class="details">
<div class="dynamically-loaded-content loaded"></div>
</div>
.
