W3C home > Mailing lists > Public > public-css-archive@w3.org > April 2017

[csswg-drafts] Quantity Queries Proposal

From: Jonathan Neal via GitHub <sysbot+gh@w3.org>
Date: Wed, 05 Apr 2017 23:06:20 +0000
To: public-css-archive@w3.org
Message-ID: <issues.opened-219740869-1491433579-sysbot+gh@w3.org>
jonathantneal has just created a new issue for https://github.com/w3c/csswg-drafts:

== Quantity Queries Proposal ==
I’m working on something right now that requires I change the style of some child elements when there are 4 or more of them. To do this presently, I do something like this.

```css
/* The <a> within an <li> of 4 or more children within .some-thing */

.some-thing li:nth-last-child(n+4) a, .some-thing li:nth-last-child(n+4) ~ li a { /* styles go here */ }
```

This seems far removed from what I was trying to express. Would it be possible to add a syntax so that I only have to write this?

```css
/* The <a> within an <li> of 4 or more children within .some-thing */

.some-thing li:of-child(n+4) a { /* styles go here */ }
```

Similarly, I may want to change the style of some child elements when there are 3 or less of them. Again, to do this presently, I use:

```css
/* The <a> within an <li> of 3 or less children within .some-thing */

.some-thing li:nth-last-child(-n+3):first-child, .some-thing li:nth-last-child(-n+3):first-child ~ li a { /* styles go here */ }
```

And again, it would be nice to express my intentions more clearly.

```css
/* The <a> within an <li> of 3 or less children within .some-thing */

.some-thing li:of-child(-n+3) a { /* styles go here */ }
```

Does this seem like a reasonable request? `:of-child()` and hey maybe `:of-type()` if we feel like being fully consistent?

Prior art: https://alistapart.com/article/quantity-queries-for-css

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1176 using your GitHub account
Received on Wednesday, 5 April 2017 23:06:27 UTC

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