[selectors] Number-of-siblings pseudoclass proposal #1176
Description
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.
/* The <a> within an <li> of 4 or more children within .some-thing */
.some-thing li:nth-last-child(n+4) a, .some-thing :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?
/* 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:
/* 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 :nth-last-child(-n+3):first-child ~ li a { /* styles go here */ }And again, it would be nice to express my intentions more clearly.
/* 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