W3C home > Mailing lists > Public > public-css-archive@w3.org > July 2019

[csswg-drafts] [css-grid] grid-item pseudo-class (#4097)

From: Indrek Paas via GitHub <sysbot+gh@w3.org>
Date: Wed, 10 Jul 2019 04:13:55 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-466088979-1562732034-sysbot+gh@w3.org>
indrekpaas has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-grid] grid-item pseudo-class ==
I often set grid-item properties on elements which by design I shouldn’t have much context about. For example when laying out different children on a (reusable) parent grid. This results in having to match grid-items based on their specific attributes (e.g. class names).

It would be great to be able to set the layout logic in a parent and separate it from children.

Instead of:

```html
<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>
```

```css
.parent {
  display: grid;
}

.child {
  grid-column: 1 / 2;
}
```

We would have:

```html
<div class="parent">
  <div></div>
  <div></div>
  <div></div>
</div>
```

```css
.parent {
  display: grid;
}

.parent:grid-item {
  grid-column: 1 / 2;
}
```

This way we wouldn’t have to assume much about child grid-items.

As a workaround I’ve been using the `.parent > *` compound selector to match grid items, but this is not ideal as the parent and children have the same specificity.

My main argument is to set all layout logic in a parent and have children follow the rules while being completely context-agnostic.


Cheers!

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/4097 using your GitHub account
Received on Wednesday, 10 July 2019 04:13:56 UTC

This archive was generated by hypermail 2.4.0 : Tuesday, 5 July 2022 06:41:50 UTC