Add :wrapped pseudo selector


#1

It would be super useful to have a :wrapped CSS selector which could allow to apply CSS on elements that are in a flex container with flex-wrap:wrap when the flex container effectively wraps. For example to apply different margin/padding, change the text alignment, …


#2

In general, we can’t have CSS selectors that depend on CSS styles - in most cases it causes circular dependencies, and when it doesn’t, it would still require an expensive looping operation that we’re loathe to saddle pages with.

This goes a bit further; we definitely can’t have CSS selectors that depend on layout - circularity is virtually guaranteed (what you’re describing is definitely circular - you could use :wrapped to restyle the elements so the flexbox doesn’t wrap anymore), and the “loop” we’d have to perform before the page was done styling is much larger and much more expensive.


#3

Can this currently be done in JS as an alternative? Then just add/remove a wrapped css class to the element? I don’t see any DOM event in the spec that triggers when an element begins to wrap.


#4

Thanks for the detailed explanation, it makes sense.


#5

Indeed a JS DOM event would help a lot :slight_smile: