988058 - [selectors4] w3c discussion of flex flowed flex-lines supporting/declaring first/last row/column selector

Status: RESOLVED WONTFIX

(Core :: CSS Parsing and Computation, enhancement, P5)

Description

[Robert Utasi [:hunboy]]

Attachment: Emulation workaround testcase for display:flex - flex-lines ; how to choose for stiling the first/last row/col (flex:auto)

By defining flex-lines there is no css selector for first/last row/column.

However sel4 contains nth-column and nth-last-column for tables, but this is not for flex flowed boxes.

This declaration is not in the w3c drafts so requires consultation if valid or not this feature.

In the attached testcase I represent a workaround with javascript how to get firts/last row/column for defining css rules. A css selector for it would be better.

Such as
:first-row or rather :nth-row(1)
:last-row or rather :nth-last-row(1)
:first-column or rather :nth-column(1)
:last-column or rather :nth-last-column(1)
for flex-lines when flex:auto

Comment 1

[Daniel Holbert [:dholbert]]

Is there a formal proposal for this somewhere? I seem to recall this being brought up on www-style, but I can't find it at the moment (and I might be misremembering).

Comment 2

[Robert Utasi [:hunboy]]

http://dev.w3.org/csswg/selectors4/#table-pseudos

selectors level4 contains for tables nth-column and nth-last column. This can be extend to flex-lines flex:auto as well

Comment 3

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

This makes sense for tables since the selectors operate on the table semantics, not the table presentation.  There are no underlying flexbox semantics to select on, so this doesn't make sense for selectors.

Comment 4

[Robert Utasi [:hunboy]]

A 1px border sample, I don't need border for the last line and last column elements.
An extra: every 2n lines lightgrayed.

ul#testcase {
  display: flex;
  flex-flow: row wrap;
  border:solid 1px #000000;
  padding:0;
}

ul#testcase > li {
  border-right:solid 1px #eeeeee;
  border-bottom:solid 1px #eeeeee;
  display: block;
  flex:auto;
}

ul#testcase > li:nth-rows(2n) {
  background-color: lightgray;
}

ul#testcase > li:nth-last-column(1) {
  border-right-width: 0;
}

ul#testcase > li:nth-last-row(1) {
  border-bottom-width: 0;
}

Comment 5

[Robert Utasi [:hunboy]]

David, thank you for your fast answer. So it doesn't worth any effort for the future usage perhaps in level5 ? although level4 is a draft too. I think this type of application is real. When we get a "table" in the layout as result we should start to think as a table stilizing.

How does it cost by processortime during reflow? much or acceptable?

Please think again, I just ask you to make a consultation at w3 for the future usage.

if my arguments are convincing (such as #Comment 4 ) reopen it, please.

Comment 6

[David Baron :dbaron: (⌚️UTC-4, no longer working on Mozilla)]

Selectors can't depend on styles.

Comment 7

[Robert Utasi [:hunboy]]

Attachment: workaround - remove unnecessary borders at right and bottom

David,

Everything is clear now. But there is an exception, :first-line pseudo-element. That is basically depends on the layout-rendering.

Testcase note for other users: the border is basically influences the layer's offsetwidth, so  this workaround in some rare cases behaves weirdly. This is the reason why I fired twice the function.

Comment 8

[Robert Utasi [:hunboy]]

Attachment: workaround - an+b variant background color for rows

Note: value of B must be smaller than A or A must be zero!