Re: [csswg-drafts] [css-grid] Ability to target items in nth-row of autofilled, implicit grid

@fantasai wrote:
> The trouble with this is that selectors can be used to set the placement properties (`grid-area`), which can change which row the item is in. :) For tables we work off of the markup only: the selector works even if you style the table as a list, so we don't have this cyclic problem.

The cyclic problem could be solved by applying the selector to the grid tracks, not to the grid items themselves, so `grid-area` and Co. do not apply.
Having said that, it sounds like it might be solved by using pseudo-elements rather than pseudo-classes, similar to what's described in #499.
So, @rachelandrew's example might be achieved like this:

```css
nav {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

nav::nth-col(1n+2) {
  background-color: red;
}
```

@kartikadur wrote:
> Adding to @fantasai's point, in @wesbos's 2nd example if there were some boxes that were n x m rather than 1 x 1 how should selecting nth-row/nth-column/nth-track affect boxes in multiple tracks?

Like the [`:nth-col()` pseudo-class described in Selectors 4](https://drafts.csswg.org/selectors-4/#the-nth-col-pseudo), the selector also applies to items spanning over several tracks. I.e. when several selectors match the same area, the normal specificity and cascading rules apply.

Sebastian

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

Received on Tuesday, 10 April 2018 11:49:19 UTC