I know we can use document.querySelectorAll(yada yada yada) to get a list of elements that match any CSS selector, but is it possible to come at the problem from another angle, and match any element with a certain CSS property?
I've written a function to shrink any flex-wrap containers to the correct size, without the ugly gap on the right hand side that current CSS means we're always stuck with. (Aside: is there something in an upcoming spec to fix this issue?)
I'd like it to run automatically on any flex-wrap containers on my site.
I don't want to add a class="flex-wrap" to each element. I know tailwind et al are all about this type of classes these days, but I'm old school. I believe in separation of design/content and that class/IDs should be semantic, not stylistic.
But for this "problem", the only solutions I can see are:
- manually add IDs/classes of elements which I know need the fix in my JavaScript
- add a class that
querySelectorAllcan latch on to - loop through every element calling
getComputedStyles()to check for this CSS property. I've not tried that, as some of my pages have many thousands of DOM elements, and I know it's a terrible idea.
Is there a better 4th option that I've not considered?