This Ancient CSS Feature Is Incredibly Useful

CSS has been around for a long time, but we spend most of our time talking about the new amazing features coming to CSS like container queries, but sometimes the best CSS features are ones that have been there all along. Quantity queries have been a part of CSS for 15 years and they are one of the coolest CSS features that I have never heard of before. In this video I talk all about quantity queries and how you can use them in your projects.
📚 Materials/References:
CSS :has Video: • This Is So Much More T...
CSS :has Article: blog.webdevsimplified.com/202...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:40 - Starting Code
01:33 - At Least Query
06:07 - At Most Query
09:15 - Between Query
10:50 - Changing Parent Element
#CSSQuantityQuery #WDS #AdvancedCSS

[@DMC888]

I’d write it as (4-n) or (4+n), it just makes more sense to me. You can instantly see which direction you’re going.

[@alessandroramelli]

Wow, this is huge!.. I remember a work, where I needed this so badly!! Thank you a lot!! :-)

[@EricFressange]

hi, nice trick to higlight all the childrens of a list. The same trick is was used to set equal width on a list items before we had the grid property. You can do a little simpler with :has now /* At list 4*/ ul:has( li:nth-child(4)) li { background-color: orange; } /* At most 2*/ ul:has( li:nth-child(-n + 2):first-child) li { background-color:green; } /* Between 6 and 9 */ ul:has( li:nth-last-child(n + 6):nth-last-child(-n + 9):first-child) li { background-color:purple; }

[@LV4EVR]

Love this. It'll definitely make it into production.

[@aqibmalik6313]

KYLE i admire ur work so much❤❤❤

[@deatho0ne587]

There are still reasons to use this, but I will never do it again - Due to most things do not need it at all - Even a React, Angular, Vue or basic JS - Just add something to the incoming data that adds/removes classes - Grid and Flex take care of 99.9% of what I have ever used it for - Responsive web design Yes, in theory this should be faster/lighter than adding a string of classes to an array but if pulling in API data you semi want to test/modify it anyways.

[@sicfxmusic]

Right from the CSS Scrolls 📜

[@bizmarinainfo1808]

How would you tie that count in your CSS style to a property coming from the HTML element in this case, the ul element?

[@clevermissfox]

Does this work with nth-of-type as well somehow? Idk why but I really struggle with nth-child syntax , I’ll grasp it then it will fall out of my head. I’ve been able to use :nth-child(1 of .item) which is awesome but I just needed a range the other day and had issues finding the right selector. this video would have been perfect then but next time!

[@horizondevs]

amazing😮

[@avneet12284]

So good

[@bharatdubey83]

Sir, can you make a video on building a small project with HTML, CSS and JS and then the same project with React, Redux, Typescript and Tailwind CSS.

[@toblamabor7072]

Hi, please make a video about this great feature of CSS: content-visibility, actually there are 0 tutorials about it

[@RobbieTianBurgerBurglar]

Can you add a ::before text to the boxes so that we can see the colors in words?

[@AmodeusR]

The only situation I see it being useful is in case you want to represent quantity of something, and as it increases it becomes more close the red color to represent fullness. Any other use case?

[@joe-skeen]

There's got to be a way you can define an SCSS construct to make it easier to write rules for between n and m elements...

[@S-craY]

Thanks from Russia for this video

[@Jdthegeek]

Would it be easier to reason with using `nth-first-child(n -4)`? I think that would do the same, right?

[@siddiqahmed3274]

Does first child also take paranthesis?

[@DMC888]

n-4 would start by producing negative values, so it would be different.

[@NamVu-im2xm]

That is really cool but no thank, I'll just use js to calculate the total items. I can't remember those code in the video.

[@myd1643]

damn, i feel old now that you describe it as 'ancient' :P

[@strategistaow3520]

I didn't learned css i know only styling I kind a learned how to use selectors But didn't learned why And i don't remember selectors

[@koksikskkj7937]

More easiest solution is to use :has() and :nth-child

[@KellerG68]

:has() is pretty new and even if the support is really good(92.1%) it's not as good as what he can use here 😉

[@user-qj4rr1rm8i]

I can't catch up this mind blowing ancient thing. Sorry Kyle.

[@_MrCode]

you used word "Ancient" in title, is 😆

[@Nodsaibot]

you can do miracles with has() , not(), is() too

[@zks9683]

Which css framework is the best?

[@bharatchakrabarthy7571]

I feel like from last few months all your video titles are a exaggerated only for them to be explain usual things in web development. I think you can build an audience without clickbaity titles, because your content is really good! no need for this practice

[@bobwilkinsonguitar6142]

This is an excellent use. The title is grabby, but still, in conjunction with the thumbnail, shows the general purpose of the video

[@al-ft1ng]

the title is not clickbait at all.

[@Hyperion62]

If clickbait tiles weren't effective then people wouldn't use them. I remember an LTT video about their ethical struggles with the effectiveness of clickbait titles vs having informative titles. If you watch them, you have probably noticed which option won.

[@adambickford8720]

2 types of vids: clickbait and ones you haven't heard of.

[@burtyful1]

Give him a break ... Kyle is one of the best on youtube

[@rishiraj2548]

🙂👍

[@fun4stefan]

no way im first =)

[@cherubin7th]

CSS has the most dumb gimmicks of all languages ever.