You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Note that the pseudo-class would need to be applied to the child element, not the parent element, as it describes the state of the element it is applied to. So e.g. it should rather be
Selectors Level 4 already defines a nth-col() pseudo-class as "grid-structural selector", so it seems to be the suggested pseudo-classes could fit there, too. (Then probably without -wrap in their name.)
Unfortunately, since the position of an element in a wrapping flexbox depends on layout, which depends on CSS properties, these pseudo-classes would be circular; we can't create pseudo-classes that depend on layout.
The :nth-col() pseudo is based purely on markup structure; it has no dependence whatsoever on layout or CSS. (So if you, say, use display:none on a cell, thus shifting which column other cells belong to in the CSS table model, they'll still match :nth-col() according to the original column they'd be in without CSS.)
referencing: https://www.w3.org/TR/selectors-4/
proposed pseudo-classes:
:first-wrap
,:last-wrap
,:first-wrap-row
,:last-wrap-row
,:nth-wrap-row()
The idea is to have pseudo-classes to help style wrapped flex items.
Given this HTML:
and this CSS:
output:
![image](https://user-images.githubusercontent.com/46059092/83545580-53524780-a4f7-11ea-9c07-4dc916488c1d.png)
The possibility to style first (or last) wrapped elements with a pseudo-class:
output 1:
![image](https://user-images.githubusercontent.com/46059092/83546445-95c85400-a4f8-11ea-8b6a-514723f3702f.png)
![image](https://user-images.githubusercontent.com/46059092/83546560-c4462f00-a4f8-11ea-99d3-0ca89b923afc.png)
output 2 (window resize):
The possibility to style entire flex rows:
output 1:
![image](https://user-images.githubusercontent.com/46059092/83547738-91049f80-a4fa-11ea-8a3c-22bf024b9502.png)
output 2 (window resize):
![image](https://user-images.githubusercontent.com/46059092/83547807-ab3e7d80-a4fa-11ea-978b-de2f04658f2a.png)
:last-wrap
,:last-wrap-row
, and:nth-wrap-row()
are self-explanatory.The text was updated successfully, but these errors were encountered: