Stop using JS for things that CSS can solve

Sometimes we need to do something, and when there is no obvious answer, we come up with really complex solutions. There are some useful pseudo-classes that give us really simple solutions thought!
🔗 Links
✅ Amit's JavaScript Problems, CSS Solutions video: • JavaScript Problems, C...
✅ Amit's Twitter: / amit_sheen
✅ Code from this video: codepen.io/kevinpowell/pen/MW...
⌚ Timestamps
00:00 - Introduction
00:39 - :empty
04:04 - :target
06:20 - :only-child and :only-of-type
#css
--
Come hang out with other dev's in my Discord Community
💬 / discord
Keep up to date with everything I'm up to
✉ www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 / kevinpowellcss
---
Help support my channel
👨‍🎓 Get a course: www.kevinpowell.co/courses
👕 Buy a shirt: teespring.com/stores/making-t...
💖 Support me on Patreon: / kevinpowell
---
My editor: VS Code - code.visualstudio.com/
---
I'm on some other places on the internet too!
If you'd like a behind the scenes and previews of what's coming up on my KZbin channel, make sure to follow me on Instagram and Twitter.
Twitter: / kevinjpowell
Codepen: codepen.io/kevinpowell/
Github: github.com/kevin-powell
---
And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[@ZaidMarrie]

I never knew about the :empty psuedo class. I feel like Kevin reveals all the secrets of HTML & CSS. Thanks Kevin!

[@AbdicateDotNet]

"Front-end fiends!" It's getting better. Great job! I love your videos.

[@novanoskillz4151]

😂😂😂

[@darshanrajpattanaik2154]

How you commented 1 days ago, video released 2 hours ago?

[@julianflorez9972]

'Friend and friends' lol

[@j-janz]

Automatic captions still think it's friend and friends, though. 😅

[@solvedfyi]

fiends be feenin'

[@hikari1690]

More please! I feel stupid everytime I think of the time I've wasted solving with js but I look forward to the years I'll save with these

[@kristianvassilev360]

Selecting a parent? I've been waiting for that for years! Please show us 👍

[@KevinPowell]

I'll do a video on it soon-ish... for now, you can look up the :has() selector, but support for it is a ways off still

[@efdrgn]

@@KevinPowell this should've been implemented a lot sooner! Need this ASAP Kevin speak to the web masters please!

[@threeone6012]

I've programmed for years but I've never used :empty or :target. So awesome, thanks Kev!

[@MrJettann]

Awesome content, Kevin!! I definitely want to see more such videos!

[@kevinfisher7032]

Kevin, kudos…another super useful video. I always look to CSS as the easiest, most bulletproof way to just get things done. For anyone who has been doing this longer than 5 years it’s great to see CSS easily solve problems that used to take hours of javascript faffing to do.

[@JDalmasca]

Great tips! Definitely the right level of not-that-well-known, but also useful! Keep up the great work, Kevin! We appreciate it!

[@khalidsaifullahfuad]

Wow, that's really helpful. I recently faced the empty error message problem and fixed it with JS. Please make more videos like this.

[@pupinarvaja]

Loved the "scroll behaviour smoOoth" 4:25

[@arthurcouto5163]

kevin pls keep making videos, you really help me and many people to continue on this way of front-end development

[@mj2758]

Thank u so much Kevin and great content. we're really in need of these kind of videos

[@anushikabhardwaj7201]

Wow, thank you so much. I needed this. Especially, this :empty is going to solve my problem 😇

[@Yukitocyborg]

Awesome content! Only-child is really good, it would have solved a problem I had before.

[@evandromottaz]

Very nice Kevin, thanks for the useful tricks. Specially the :target...

[@vasyaqwe2087]

Great tips as always, Kevin! Waiting for :has video

[@WellSaint001]

Thanks Kevin! This is really useful

[@alejandroingercher3020]

I really enjoy your content. You are like a box full of surprising css tools

[@willsoe]

Here's a contribution to this idea from a newbie. I once wrote a load of js to manage clicks on an animation of a timer wheel which would trigger a new image from the server. I got rid of it all and instead made the click end the animation and then attach a listener to an animationiteration to trigger the new image download. No js timing needed!

[@yt_brij]

Target and Empty is new for me Thanks for the informative Video 😉

[@yaycupcake]

would love to see content on the has selector but also an update video on when it's usable too

[@AndreaASalvatierra]

thank you! would love to know more about the has selector :D

[@Karthik-ug8ll]

Hey kevin, Thanks for awesome contents,looking forward video on how "has" function works in css,thanks in advance😊

[@demicoderr]

Thank you so much Kevin! Love your videos

[@qwertgfhxc]

You're the best Kevin, keep going! :)

[@codernerd7076]

Thanks I learned some new things! I'm a big fan of keeping things simple and get some work done 😁👍

[@NottsKnots]

Hi Kevin, started watching your videos recently and there is lots of intresting stuff here. One request, could you cover some 'practical' topics in depth at some point? Perhaps your best practices for starting a new Bootstrap site with the current version? (seen the old series you did.) Or talk about an overview of how your organise your CSS and why? What is the best way to arrange CSS to make best use of cascading? In other words, taking the things you have shown from your more ' flashy' videos and showing how to apply the knowledge to a typical real world project. Thanks.

[@dillanclark864]

I've watched a few of your videos before and I was like, yeah okay you have some good tips. But you sir, have earned yourself a sub and a like after these nifty little tricks. Very well done!

[@Brandon-bg2de]

Nice video Kevin! I am wondering is it possible for built in css to handle click outside alerter for multiple mapped elements? Let’s say when we clicked outside of each element, the corresponding clicked element dissapear. I currently implement it with Javascript but it would be interesting if css can handle this too :)

[@TechBuddy_]

In the target selector add an animation that just changes the brightness filter for a bit to highlight the target element instead of a red outline which I use all the time,it's easy to write, easy to use and very effective.

[@CirTap]

Pseudo selectors can also be combined: p:only-of-type:not(:only-child) for the single paragraph with the image, or the other way around: img:first-child + p:only-of-type to ignore the one with multiple paragraphs, again use :not() to reverse the logic.

[@arafat64]

we are appreciate your effort Kevin thanks, I love the dynamic development logic it's very useful and helpful to save our time.

[@techforsolution2505]

Cool! I like the :target one.

[@bo4695]

Hi mate, thanks for the tutorial! I was wondering if it is possible to remove the styles for the " :target " element for like after a few seconds or even based on an event. Thanks!

[@sahilmehraa]

Your videos has saved my time and efforts almost everyday. 😁

[@cseymour97]

Target is one of my favorites. I love using it for dynamic tabs.

[@ArifMatubber-km4nv]

that was awesome thing. wow Thank you so much Kevin

[@e11world]

I like the :target selector and I think a nice way to implement it would be to have an animation tied to it. Example would be to highlight in a way but fade it out after 1s.

[@AverageCho]

Thats an awesome idea. Nice one two combo

[@e11world]

@@AverageCho Thanks yea this target selector is amazing for this and if you already have smooth scroll in CSS, it's that much nicer.

[@MMH94MMH]

You are amazing Kevin, this video is a life changer for me.

[@toguppy1985]

Love :target pseudo selector. have played with this and an animation so that it runs, identifies the area, and then removes the identifier

[@xingfucoder2627]

Hi Kevin, great video. When will be available your SASS course?

[@crim-son]

You're making JavaScript Redundant with your videos 🥺🥺😍😍, Good work Mister Kevin

[@soul.rebel1986]

Awesome as always 🎉

[@fazlerabbi9200]

These are really awesome!

[@FunBSDpami]

Great tips. Thx!

[@darkpain4208]

Thanks, Kevin. You changed my life.

[@RaviRambaran]

Yes! Thank you Kevin!

[@kamilcopur6513]

Perfect... Thank your for sharing..

[@djvesko]

Thanks for these!

[@rickardelimaa]

Just learned about _:empty_ a month ago when a markup script generated empty (p)aragraphs for row-breaks. Just thought "wonder if CSS has a solution for this". Will use _:target_ in the future. Learned something new there.

[@AndreSpecht]

Hi Kevin. Do you have a video that explains the differences between styles in html and * selectors? Thanks

[@aram5642]

I would be curious to see you refactor css of a site, getting rid of complex selectors in favor of where and is.

[@kiravolvo]

thank you kevin. you rock!

[@MarekFodor]

Damn, this is really helpful and saves lot of time.

[@MikeyMoNL]

Before I found out about only-child I just used :first-child:last-child. That does the same trick.

[@misticx]

Very useful tips, gj.

[@alanlewis1625]

Hi Kevin, nice video. The features you mention are useful. I do have a question, -not directly related to this content- I hope you can either suggest a solution, or point to a video you have previously made. That is, if I want to 'highlight' a navigation item / tab, that is currently being displayed e.g. this page, how can I do this using only CSS? Thanks

[@KevinPowell]

You need a class that changes the styling, and apply to to the link for that page. There is nothing in CSS that can know what page is actually the active one

[@NiborGnittekeduog]

My gosh! How often I have looked for :has to check the state of the implementation. It's getting closer!!

[@andertker4460]

Good content! Greetings from Bilbao!!

[@jma6893]

oh wow, i didn't know about the :target one... that has so much potential... less .js to write haha... Thanks Kevin!

[@fylip22b]

Thanks for these tips! I improve my CSS knowledge. Philippe P

[@oohsorry4506]

Question: if u use the empty pseudo reset thingy on everything but Img svgs does it mean u cant make boxes from divs now, cuz its empty

[@CirTap]

Just noticed I could've used :target for something I did lately with JS... if I slap an id on the element this should work. 🙂

[@moritzgeorgy5440]

Awesome!

[@pixiedev]

Very helpful I'll use. but Is there any way to set different margin or other attributes for p tag (paragraph) if 2 p is continuous like demo para 1 demo para 2

[@KevinPowell]

You can select the second one with p + p...

[@RussellDove]

Greetings, awesome content. Would you happen to know of a good web form validation script that increases accessibility by enabling screen readers to announce error messages?

[@KevinPowell]

Oh, that would be great. I don't know of one... there must be something out there though. Time to start digging

[@uc9773]

nice tip thanks!

[@vickmackey24]

6:44 Unrelated to your lesson, but does the pipe between "testimonials" and "flow" in the class attribute do something special here?

[@404-UsernameNotFound]

When looking at the .classList of the element using JS, it shows `DOMTokenList(3) ['testimonials', '|', 'flow']`. So the pipe is it's own class?

[@KevinPowell]

No, it's just a visual separator, picked it up from using CUBE CSS. It's technically a class that's just not doing anything at all. Might even be an invalid one, but it doesn't cause any problems.

[@michaelm8044]

You're the man, man.

[@ErikBlomqvistSwe]

Nice to see the usage of thisisnotarealperson to display images of people, rather than a common avatar service, Kevin!

[@Technoph1le]

Hi, Kevin! I have a question regarding custom properties. Consider you have design that has more than 10 neutral colors. And, you are assigning them in custom properties in such: :root { --clr-neutral-100: #FFF; --clr-neutral-400: #444; ..... --clr-neutral-900: #222; } In custom properties, you did assign from 100 to 900, which can hold only 9 values. What and how do you deal with the rest of the neutral colors? Would you assign them, like ---clr-neutral-100_1 or any other method? Thanks in advance.

[@fredhair]

From a design perspective if you've got more than 9 neutral colors, I think you're using too many colors for sure. Most color schemes only have a handful of neutral colors. You really don't need a different shade for every single component in your page. I tend to use a primary & secondary color with maybe 3 or 4 shades each and a light & dark neutral color with 4 or 5 shades. If you want to build a brand, you will likely have 2 or 3 colors that you actually use with a handful of neutral tones to complement / contrast your main colors. For most people a scale of 9 shades is more than enough for a single 'color'. You might have a light neutral and dark neutral which also have a 9 shade range but rarely will you need such fine distinctions between shades unless you're creating a gradient which you'd interpolate anyway.

[@KevinPowell]

Yeah, more than 9 shades of a color is a lot... BUT if you need to, I just keep going, lol. 900, 1000, 1100, etc. Though normally what happens is a new color gets added that's between two existing colors, which is why I like numbering in the 100s. If you have clr-neutral-1 and clr-neutral-2, it's annoying to get something in the middle... with 100s, you can have clr-100, clr-150, clr-200 etc.

[@alwaysgratefulmixail7569]

I've been in need of the :target pseudo class for a frontend mentor project for a whole month and something 😂 I thought I only have to use JavaScript 🤣

[@andystevenson6336]

This is excellent Kevin. Would like to see something on :has

[@Brunoenribeiro]

:target blew my mind!

[@ManuelSanchez-hy8yi]

Look forward to having your has() video!

[@s7s_space]

How to make active class on links for nav in target?

[@dave6012]

Love this approach. CSS is powerful 💪

[@dave6012]

PS- waiting fervently for :has() !!

[@xingfucoder2627]

great video! when will be available the SASS course? 🙂

[@KevinPowell]

don't ask 🤣🤣 - taking a break from working on it to read some comments... it's getting there... slowly, lol.

[@xingfucoder2627]

@@KevinPowell don't worry Kevin ☺️ take rest. Thanks for quick answer

[@yusi9437]

Suddenly comments have popped up about your welcoming introduction "front end friends". Up until your previous upload I always thought you were saying "friend and friends" as in to welcome the viewer personally and then everybody else 😂

[@stephenJpollei]

Yes I thought he was saying "friend and friends" when I first started watching his videos; just thought it was part of him being super nice. I hear "front-end friends" clearly now though.

[@tigrafale4610]

What? I was sure it was friend and friends! It's just like with TheWarOwl, "I still have no clothes on".

[@abdulkadirguven1173]

Thanks Kevin

[@MuhammadAhmedAshraf]

How the youtube and wikipedia has elements when they can't fit in to screen the position themselves top -215px and when there's enough space at the bottom the have top 200px like youtube has on the edit comment is through the use of intersection observer api and am i right api means functions, objects of a library and urls on web

[@KevinPowell]

My guess would be intersection observers, yes. In this case, the API is a bit different because it's one the browser uses, not an API you'd use to pull stuff from a server or whatever.

[@fakefury1198]

So at like 8:18 when you're explaining the :not(:only-of-type), I see why this is really useful, but wouldn't just giving the element a specific class be better? I know that it is generally best to stay away from complex selectors, so I was just wondering if you would normally prefer a class over doing this.

[@JoeBonez]

What is the deal with the vertical bar in the class name (“testimonials | flow”)? I’ve never seen that before, and the google is failing me.

[@KevinPowell]

Comes from CUBE CSS, it's just a visual separator between "blocks" and "utililities"

[@eren1514]

Hey Kevin! Love your content! but I'm really a dumb on responsive side :D May you make a clone project that focus on responsive side, such as cards, nav... thank you!

[@robertcarsten4050]

Have you checked out Kevin's Responsive design course? Can't post links but if you search Kevin powell responsive design it should be the first link

[@ScottLee64]

Your videos make me less unenthusiastic about CSS. Thanks!

[@sssamalander]

Could you use this to make a carousel?

[@blasfah1909]

Cool!

[@j-janz]

Yes, bring :has() content on! 😊

[@404-UsernameNotFound]

:has() can be enabled in Chrome and Edge beginning in v101 with the enable-experimental-web-platform-features flag and is slated to be GA in v105.

[@AbhinavKulshreshtha]

About :target, wouldn't it mess with keyboard navigation? I used that property in the past for visually show the keyboard navigation. But other than that, I don't know much about it. I wish I knew about :empty in the past, I have spent so many hours hiding error messages and flash messages.

[@KevinPowell]

It shouldn't have any impact on keyboard navigation? It's just a visual clue for what's been targetted... you just wouldn't want to use the same style for :outline as you would for :target because then that would get annoying

[@GmodArgentina]

Kevin I'm currently learning Web design but after learning css I've become obssesed with it. You think it's better to become very good at css before jumping to Javascript or i should start now ?

[@KevinPowell]

I guess it depends on how far along you are, but once you feel like you're getting comfortable with CSS, even if you're not "very good" yet, I'd probably start sprinkling in some JS

[@GmodArgentina]

@@KevinPowell Thanks that I'll do ! Should i start from scratch or straight to react ?

[@clevermissfox]

5:30 hmm “tricks” with target?? What could that be?!

[@TillmanTech]

I like those profile pictures of Jane and John in the first segment on :empty. How many times did you have to refresh the page to get such good results? 😉

[@KevinPowell]

Showed up in my first load of loremfaces.com/ :)

[@emreaydogdu5413]

Keep generating videos with your style! BTW, do not you speak a lot during video :) ? This is spiritual energy!

[@anushervonTabarov]

THANK YOU FROM TAJIKISTAN !

[@qm3ster]

I wonder if I should actually use :empty... Sounds like it would leave a bunch of hidden HTML in the DOM. I should probably just continue not including it, whether on the server or on the client.

[@lukaszpiotrluczak]

Letting you know :)

[@GR_BackingTracks]

I am madly, deeply in love with CSS...

[@YurijVolkov]

I'm working with CSS since early 2000 and I noticed that I tend not to know about new features of it. I'm just using the same thing as part of a habit, knowing that it works... You should always learn continuously! Don't make oldfags mistakes! :D

[@fissure9999]

👍👍👍

[@bazz6932]

Powerful