pascalduez / postcss-quantity-queries

PostCSS plugin enabling quantity-queries
The Unlicense
114 stars 4 forks source link

Feature Request - Children #8

Open simeydotme opened 8 years ago

simeydotme commented 8 years ago

I was most perplexed when I wrote:

ul > li:exactly( 3 ) img { opacity: 0.5; }

And found it didn't work... I would expect the result to be:

ul > li:nth-last-child(4):first-child, 
ul > li:nth-last-child(4):first-child ~ li img {
    opacity: 0.5;
}

Is there any intent to implement this? are you accepting PRs ? :)

pascalduez commented 8 years ago

Hi,

that seems like a reasonable addition, would you mind providing a quick demo of the use case ? A Codepen or the like.

I'll implement it as soon as I have a free slot, but anyway yes, PRs are welcome :)

simeydotme commented 8 years ago

here's a decent(ish) use-case scenario. http://codepen.io/simeydotme/pen/b962499b3ed71e09ac3db0b9f33b52b4/

Actually. when I ran in to the issue using it at work; it was to do with squishing images in a list based on the amount of items in the list (ul > li > img). However; I was able to constrain the images with max-width: 100% but this seems like only possible with my specific case, and with others (as demonstrated) you'd not get away so lightly. :smile:

As you can see, it's feasible with the sass version, and also it's possible just by using the http://www.quantityqueries.com/ builder and writing your sub-tag afterwards. Although; ugly as sin. haha.


As for the PR, I forked it out and took a look, but honestly with my limited understanding of babel / es6, and getting lost while trying to install a make runner on my windows machine.. I wouldn't feasibly be able to contribute without significant investment :disappointed:

dikmax commented 8 years ago

I have same problem. But I want to apply additional pseudo-selectors like this:

a:at-most(5):nth-child(n+4) {
  display:none;
}

Use case: items table 2 rows x 3 cols, and second row can't be incomplete.

wc-matteo commented 7 years ago

Same issue. It would be great to see this fixed!

pascalduez commented 7 years ago

WIP, will try to finish it soonish.

WebMechanic commented 1 year ago

could you please define "soonish"? It's 2022 😁