- From: Jonathan Neal via GitHub <sysbot+gh@w3.org>
- Date: Wed, 05 Apr 2017 23:06:20 +0000
- To: public-css-archive@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