Comments on Quantity Queries for CSS

54 Reader Comments

Back to the Article
  1. This is a cool technique, and it’s been written about before.

    Copy & paste the code below to embed this comment.
  2. Well written !
    It could also be a nice SCSS mixin use :
    http://codepen.io/long-lazuli/pen/PwBbmo?editors=010

    Copy & paste the code below to embed this comment.
  3. @Martin Gustav

    No, this has not been written about before.

    Lea’s article is apparently similar up to a point, but she does not go any further than the discrete quantities that I cover about half way through. These, as I explain, have few applications and also do not solve the problem at hand.

    The solution to the problem requires offsets (n+6 or -n+6) to create the necessary “thresholds”. I’m not aware of anyone who has written about this.

    I feel as though you only read up to the point where you recognised the similarity with Lea’s CSS and stopped?

    Copy & paste the code below to embed this comment.
  4. A move toward more content aware CSS would be a Designer’s dream come true.  It would allow for much more flexibility in navigation structures and content layout templates.

    I’m curious about this statement though…

    “This makes Photoshop mockups of web pages doubly obsolete.”

    What then would be the author’s recommendation for a non-Photoshop-based design solution?

    Copy & paste the code below to embed this comment.
  5. Reminds me of this article which I used last week on a project: http://keithclark.co.uk/articles/targeting-first-and-last-rows-in-css-grid-layouts/

    Great articles, both.

    Copy & paste the code below to embed this comment.
  6. @New Leaf Interactive: I would suggest building in HTML and CSS from the outset. Not full page designs to begin with, but a “living” styleguide divided into HTML components. This encourages you to write accessible code and gives you flexibility by not tying you to a concrete layout too early.

    Copy & paste the code below to embed this comment.
  7. @Carole Magouirk: Thank you, I’d not seen that. I wrote an article on handling grid uniformity with selectors a while back too which might prove to be a worthwhile supplement to that? http://www.heydonworks.com/article/tetris-and-the-power-of-css

    Copy & paste the code below to embed this comment.
  8. Well written, full of insider references for us! Well done.

    Copy & paste the code below to embed this comment.
  9. Great article, Heydon Pickering.
    You can do amazing stuff combining different CSS pseudo-selectors.
    I played around with some CSS “counting” myself a while ago and came up with an almost identical solution.
    http://codepen.io/torbencolding/pen/dPKYbY

    Copy & paste the code below to embed this comment.
  10. Cool technique Heydon.

    @Torben Nice effect, but your css only applies to the grids of a certain size; if I add another row with 5 divs, the first one is grey and the last 4 are yellow.

    If you update your css with n+4, you support formatting 4 divs and greater: http://codepen.io/anon/pen/EapXar

    Copy & paste the code below to embed this comment.
  11. @pete
    You’re right. It will not work with widths of 1/3, 2/3 etc in a grid system.
    But I’m not trying to make a grid system. I only use it to demonstrate that you can apply a specific set of styles - in this case a background color - to a group of child-elements based on their number. The same as Heydon :-)

    Copy & paste the code below to embed this comment.
  12. Excellent technique, Good Job Heydon.

    Copy & paste the code below to embed this comment.
  13. The article is very similar to: https://grack.com/blog/2015/01/09/abusing-css3-selectors/

    I think yours put the concept across a bit simpler though.  Navigation menus are great case for this, especially if you’ve ever had to convert a designers’ PSD where they used few short-named menu items, and it’s fine for like, a year, until the site changes its scope and needs a whole bunch more. 

    Copy & paste the code below to embed this comment.
  14. I’ve been experimenting with a similar notion on my current project. Nice write up.

    Copy & paste the code below to embed this comment.
  15. This is very cool! It’s not a frequent use-case, but may be handy when such a problem pops up.

    Copy & paste the code below to embed this comment.
  16. So easy, so cool! Thx, really good job here.

    Copy & paste the code below to embed this comment.
  17. Very useful article, thanks. It felt a bit fiddly at first, but the more I read on, the more it made sense.
    I can think of a ‘Show more’ type thing using this technique!

    Copy & paste the code below to embed this comment.
  18. A useful technique, very well explained. Great article @Heydon Pickering!

    I have created a set of simple mixins for Sass that help with the selector construction. There’s also a `between()` mixin that generates a query for a range of items (e.g. ≥ 4 and ≤ 6 items). It hasn’t been discussed in the article but it’s easily feasible by combining the “fewer or equal than” and “more or equal than” techniques.

    Check out the quantity queries Sass mixins: https://github.com/danielguillan/quantity-queries

    Codepen demo: http://codepen.io/danielguillan/pen/GgBOxm

    Copy & paste the code below to embed this comment.
  19. Great article, I’ll definitly be keeping this in mind when working on my new responsive project

    Copy & paste the code below to embed this comment.
  20. Great article. Very inventive uses of pseudo-selectors. I really enjoy articles like this to help me think about CSS problems from a different perspective. Keep up the good work!

    Copy & paste the code below to embed this comment.
  21. Nice writeup of this!
    Yes, I hadn’t mentioned ranges in my article back then, but I showed them plenty of times in my CSS Secrets talks in 2011 :)
    This technique (including the ranges) is also one of the “secrets” in my CSS Secrets book.
    But still, just because it’s been written and talked about before doesn’t mean it’s not super useful to have an extensive, illustrated, polished writeup like this one!

    Copy & paste the code below to embed this comment.
  22. This is really cool.
    But I can’t stop thinking that this relatively complex logic is a result of absence of a seriously “counting” script in CSS architecture.
    Still - I definitely like this post.

    By the way : the number “653,279” is not an integer ;]

    Copy & paste the code below to embed this comment.
  23. That is a really creative technique.

    Copy & paste the code below to embed this comment.
  24. @New Leaf Interactive: I would suggest building in HTML and CSS from the outset. Not full page designs to begin with, but a “living” styleguide divided into HTML components. This encourages you to write accessible code and gives you flexibility by not tying you to a concrete layout too early.

    ——————————————————

    Sadly this isn’t a feasible approach when working within an Interactive Agency that services large brands. 

    Website design for large corporate clients is always highly customized and very creatively detailed, is guided by demanding global brand visuals and standards, is shaped by a large User Experience team, and is visually designed by a team of Web Designers who are not the ones actually building the website. 

    I’m one of the rare Designers who knows HTML and CSS (15 years ago we had to know HTML), and who enjoys using both on occasion.  Yet I still find myself extremely limited creatively and visually when I “design” within an HTML framework.

    I can only hope the Design Community will someday receive a tool as powerful as Photoshop that allows responsive-friendly “living design.  Adobe Muse seems to be headed in the right direction, but at this point horribly fails the responsive coding test. Perhaps in the next iteration.

    Copy & paste the code below to embed this comment.
  25. These selectors are among the slowest possible. ~500 slower than something wild like “div.box:not(:empty):last-of-type .title”. Test page http://jsbin.com/gozula/1/quiet

    That said, selector speed is rarely a concern, but if this selector ends up in a dynamic webapp where DOM changes are very common, it could have a large effect.  So, good for many use cases but keep in mind it might become a perf bottleneck as the app matures. Something to profile at that point.  Cheers

    Copy & paste the code below to embed this comment.
  26. @Paul Irish: The slowness that you’re seeing with those selectors appears to me to be a flaw in webkit rather than an inherent problem with the selectors themselves. I just tried your test page with Firefox and an old copy of Opera (using the Presto engine) and neither of them seemed to have any problem with nth-last-child test case.

    Of course it’s an issue developers should be aware of, given webkit’s prevalence, but I would also think it’s something the webkit devs would be keen to fix if those results are really as bad as they appear (although for me webkit’s nth-last-child performance was about 50 times slower than the others, not 500).

    Copy & paste the code below to embed this comment.
  27. This is fantastic. Thank you for explaining all the details.

    Copy & paste the code below to embed this comment.
  28. Maybe I misunderstood something, but doesn’t it depend on how large the navigation labels are, instead of the quantity of items? If “blog” gets replaced with “endorsements”, then on narrower screens it starts to overflow and the CSS would need to be updated with a smaller “breakpoint” number. See this pen: http://codepen.io/simurai/pen/MYBZJg

    Maybe a better use case is for girds where all items have the same width and are more predictable.

    Copy & paste the code below to embed this comment.
  29. Great article, what’s the performance like though?

    Copy & paste the code below to embed this comment.
  30. Great post, Heydon. Really nice technique.

    Copy & paste the code below to embed this comment.
  31. What a refeshing, great article! And when I got to the end and noticed it was by Mr. Pickering, I understood. Keep up the innovating and pushing CSS forward!

    Copy & paste the code below to embed this comment.
  32. Here’s my use of this with an automatic grid system ;)
    http://codepen.io/onediv/pen/GgEKMR

    Copy & paste the code below to embed this comment.
  33. What a pleasant and inspiring read - thanks! I’m going to start playing with this immediately.

    Copy & paste the code below to embed this comment.
  34. Nice post, Heydon. Something I can (and will) use today.

    Copy & paste the code below to embed this comment.
  35. Great technique and article! I wrote a quantity query mixin for Sass to make generating the selectors easy as pie: http://sassmeister.com/gist/indrekpaas/f48e5e34d329eaf44e37. Cheers!

    Copy & paste the code below to embed this comment.
  36. Awesome! This is a problem that I’ve thought a lot about lately. In my mind, I’ve called it “content awareness”. User generated content can be very diverse and designing for every situation isn’t a luxury many can afford.

    Copy & paste the code below to embed this comment.
  37. Great read, Heydon. Bookmarked for next project’s use.

    Copy & paste the code below to embed this comment.
  38. Brilliant.

    Copy & paste the code below to embed this comment.
  39. This is a great idea, but it must be said that the use case of a CMS would generally involve some amount of control of the backend (e.g., a Wordpress theme). Therefore, I would be inclined to use the backend to simply set a class that indicates quantity on the parent element over a more obscure / potentially less performant pure CSS solution. But in the very narrow set of cases where the developer is dealing with an indeterminate number of items AND has no control / competence to edit the backend templates, this would prove very useful indeed. Good writeup!

    Copy & paste the code below to embed this comment.
  40. Interesting read Heydon, the application for this sort of selection could be incredibly useful with dynamic content.

    I find it so strange how we often have to get somewhere by hacking with css before it’s actually considered to be implemented as a natural part of css. This concept obviously works, but wouldn’t it be nice if we could write articles about use-case scenarios rather than just explaining how to things working? Rhetorical question, just felt like ranting.

    Thanks for the read,

    Copy & paste the code below to embed this comment.
  41. Thanks for the article.

    Copy & paste the code below to embed this comment.
  42. Thanks, I create some useful sass mixin according your article!

    Source: https://github.com/qiu8310/my-sass

    Live Demo: http://codepen.io/qiu8310/pen/bdWbvm?editors=110

    Copy & paste the code below to embed this comment.
  43. Post amazing! I’m practicing, soon publish my test here.

    Copy & paste the code below to embed this comment.
  44. This is so clever. I was with you till halfway through the article and then I started to struggle with the logic, but I can see what your doing. Going to re read this until it clicks because it’s so powerful :)

    Thanks

    Copy & paste the code below to embed this comment.
  45. information about css and html code that is very helpful for me who is studying deeper .. keep working , thanks to quality article , if you need information about more try visiting,,Harga Sepatu Prewalker murah

    Copy & paste the code below to embed this comment.
  46. What a pleasant and inspiring read - thanks! I’m going to start playing with this immediately.

    Copy & paste the code below to embed this comment.
  47. I want you to thank for your time of this wonderful read!!! I definately enjoy every little bit of it and I have you bookmarked to check out new stuff of your blog a must read blog!!

    Copy & paste the code below to embed this comment.
  48. My heart started beating faster when I read: “I’m not pointing at some blurry specification in the distance or a twinkle in an implementer’s eye. We’re going to do this today, with CSS that’s already available.”

    Copy & paste the code below to embed this comment.
  49. @Heydon,

    Two years later, these clever techniques are still grossly underused or unknown. I don’t consider any of it to be a hack, either. Your article is great and I tell people who doubt the power of CSS to read it. Thanks again.

    Copy & paste the code below to embed this comment.