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

⌚ 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

Keep up to date with everything I'm up to

Come hang out with me live every Monday on Twitch!

---

Help support my channel

---


---

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 YouTube channel, make sure to follow me on Instagram and Twitter.


---

And whatever you do, don't forget to keep on making your corner of the internet just a little bit more awesome!

[AbdicateDotNet]

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

[hikari]

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

[ZaidMarrie]

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

[threeone]

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!

[kevinfisher]

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.

[arthurcouto]

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

[kristianvassilev]

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

[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.

[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!

[JDalmasca]

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

[yt_brij]

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

[anushikabhardwaj]

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.

[mj]

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

[pupinarvaja]

Loved the "scroll behaviour smoOoth" 4:25

[evandromottaz]

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

[crim-son]

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

[vasyaqwe]

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

[mattwood]

If you're developing for a cms and you have control over the template it is always good practice to wrap your fields in if statements you don't want empty elements on the dom at all