[csswg-drafts] [css-selectors][css-flexbox] Pseudo-classes for flex-wrapped and rows elements (#5150)

smhmd has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-selectors][css-flexbox] Pseudo-classes for flex-wrapped and rows elements ==
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:
```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:
```css
ul {
  display: flex;
  flex-wrap: wrap;
}

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

li {
  width: 150px;
}
```
**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:
```css
ul:first-wrap {
  border: none;
}  
```
**output 1:**
![image](https://user-images.githubusercontent.com/46059092/83546445-95c85400-a4f8-11ea-8b6a-514723f3702f.png)
**output 2 (window resize):**
![image](https://user-images.githubusercontent.com/46059092/83546560-c4462f00-a4f8-11ea-99d3-0ca89b923afc.png)

---

The possibility to style entire flex rows:
```css
ul:first-wrap-row > * {
  border-bottom: 2px solid black;
}
```
**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. 

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5150 using your GitHub account

Received on Tuesday, 2 June 2020 18:16:24 UTC