[css-selectors][css-flexbox] Pseudo-classes for flex-wrapped and rows elements

[smhmd]

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:

<ul>
  <li>one</li>
  <li>two</li>
  <li>three</li>
  <li>four</li>
  <li>five</li>
  <li>six</li>
  <li>seven</li>
  <li>eight</li>
  <li>nine</li>
</ul>

and this CSS:

ul {
  display: flex;
  flex-wrap: wrap;
}

ul > * + * {
  border-left: 2px solid black;
}

li {
  width: 150px;
}

output:

---

The possibility to style first (or last) wrapped elements with a pseudo-class:

ul:first-wrap {
  border: none;
}  

output 1:

output 2 (window resize):

---

The possibility to style entire flex rows:

ul:first-wrap-row > * {
  border-bottom: 2px solid black;
}

output 1:

output 2 (window resize):

---

:last-wrap, :last-wrap-row, and :nth-wrap-row() are self-explanatory.

[SebastianZ]

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

li:first-wrap-row {
  border-bottom: 2px solid black;
}

This could also apply to grid layout. Example:

HTML:

<div id="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>

CSS:

#grid {
  display: grid;
  grid-template-columns: auto auto;
}

#grid > div:first-wrap-row {
  border-bottom: 2px solid black;
}

would result in

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.)

Sebastian

[tabatkins]

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.)

[cyraid]

@tabatkins I know it's not a pseudo class, but now that container queries are a thing, would it be feasible to have a opt-in wrapped query?