Re: [csswg-drafts] [css-grid] grid area as element (#4416)

@chvndb you're right and that's what I originally had in mind but I totally mixed up the terms "grid items" and "grid areas" :) 
The thrown-in `:flex-items()` in the context of _styling_ "areas" of a flexbox wouldn't apply for there's no such thing as an area -- yet,  see below.

FWIW, I'd be happy to target grid **areas** to apply _decorative styles_ like bg-colors, backdrops and borders. This would then indeed be similar to what @jensimmons proposed and @tabatkins then suggested in #499 as kindly referred to by @fantasai. 
I don't have an opinion on Jen's variation using/reviving `@region`, although this could be "extended" to include other layout methods.
https://speakerdeck.com/jensimmons/proposal-to-csswg-sept-2016 (slides 26+)

[separate issue?]
One could think of the "areas" we get from flexbox are the additional rows/colums created when using `flex-wrap: wrap`. It'd be equally nice to style them. Similar to `::first-line` or `initial-letter` or `:nth-child()` etc. it'd be useful to target such a `:flex-[inline|block]-area()` - if only for zebra stripes or to simulate some sort of _horizontal `column-rule`._
```css
.mystack { display:flex; flex-direction:row; flex-wrap:wrap }
/* backdrop color for odd|even "rows" */
.mystack::flex-block-area(odd) { background:white }
.mystack::flex-block-area(even) { background:black }
/* font color for items in odd|even rows */
.mystack::flex-block-area(odd) > * { color:black; border-color:currentColor }
.mystack::flex-block-area(even) > * { color:white; border-color:currentColor }
```
The syntax could follow `:nth-child()`.
To follow flexbox nomenclature this could also be named `:flex-[main|cross]-area()`.


-- 
GitHub Notification of comment by WebMechanic
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4416#issuecomment-544124396 using your GitHub account

Received on Saturday, 19 October 2019 10:18:26 UTC