Stop using JS for things that CSS can solve

[@ZaidMarrie]

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

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

[@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?

[@j-janz]

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

[@solvedfyi]

fiends be feenin'

[@asdf14051]

@@darshanrajpattanaik2154 the video is released early to patreon supporters

[@threeone6012]

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

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

[@te_34]

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

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

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

[@MrJettann]

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

[@pupinarvaja]

Loved the "scroll behaviour smoOoth" 4:25

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

[@arthurcouto5163]

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

[@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 😉

[@anushikabhardwaj7201]

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

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

[@Yukitocyborg]

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

[@mj2758]

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

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

[@WellSaint001]

Thanks Kevin! This is really useful

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

[@evandromottaz]

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

[@vasyaqwe2087]

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

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

[@techforsolution2505]

Cool! I like the :target one.

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

[@toguppy1985]

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

[@schmoris]

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

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

[@Karthik-ug8ll]

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

[@clevermissfox]

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

[@AndreaASalvatierra]

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

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

[@MikeyMoNL]

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

[@arafat64]

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

[@aram5642]

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

[@codernerd7076]

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

[@xingfucoder2627]

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

[@alejandroingercher3020]

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

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

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

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

[@soul.rebel1986]

Awesome as always 🎉

[@sahilmehraa]

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

[@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 :)

[@RaviRambaran]

Yes! Thank you Kevin!

[@crim-son]

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

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

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

[@demicoderr]

Thank you so much Kevin! Love your videos

[@yaycupcake]

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

[@MMH94MMH]

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

[@fazlerabbi9200]

These are really awesome!

[@kiravolvo]

thank you kevin. you rock!

[@NiborGnittekeduog]

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

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

[@djvesko]

Thanks for these!

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

[@FunBSDpami]

Great tips. Thx!

[@somrigostsaas]

Nice to see the usage of thisisnotarealperson to display images of people, rather than a common avatar service, 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.

[@kamilcopur6513]

Perfect... Thank your for sharing..

[@MarekFodor]

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

[@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 ?

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

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

[@AndreSpecht]

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

[@misticx]

Very useful tips, gj.

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

[@jma6893]

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

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

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

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

[@darkpain4208]

Thanks, Kevin. You changed my life.

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

[@andertker4460]

Good content! Greetings from Bilbao!!

[@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/ :)

[@dave6012]

Love this approach. CSS is powerful 💪

[@dave6012]

PS- waiting fervently for :has() !!

[@abdulkadirguven1173]

Thanks Kevin

[@s7s_space]

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

[@Brunoenribeiro]

:target blew my mind!

[@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"

[@emreaydogdu5413]

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

[@ScottLee64]

Your videos make me less unenthusiastic about CSS. Thanks!

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

[@evrgreen537]

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

[@sssamalander]

Could you use this to make a carousel?

[@ManuelSanchez-hy8yi]

Look forward to having your has() video!

[@michaelm8044]

You're the man, man.

[@moritzgeorgy5440]

Awesome!

[@uc9773]

nice tip thanks!

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

[@fylip22b]

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

[@anushervonTabarov]

THANK YOU FROM TAJIKISTAN !

[@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 🤣

[@georgebradley4583]

Hi Kevin. Could you do a video on why it’s still important to know pure CSS when we have Bootstrap and WordPress? By the way, I love CSS and have watched practically all of your videos. I’m currently a national qualifier in Website Design and Development for a prestigious event called “WorldSkills”, here in the UK and your videos have been essential for my preparation for it. Thank you! Kind regards, George

[@KevinPowell]

Well, unless you want your site to look like every other Bootstrap site, understanding CSS makes it a lot easier to work with and customize Bootstrap. I'd also say knowing CSS just makes you use Boostrap much better as well... plus while Bootstrap is popular, it's not *that* popular, and probably fading within the job market as well for other solutions. Knowing the base language makes it a lot easier to pivot and adapt as the landscape changes :) Also, good luck with the WorldSkills competition! I was a mentor a couple of times for those when I was still working at a school :)

[@georgebradley4583]

@@KevinPowell Wow! Thanks for so quickly responding! Ah really good answer! Thank you! Totally agree! And thanks so much! That means so much coming from the King of CSS!

[@calvinwilson3617]

"Theres an html element for that!"

[@Gary_Reid_Backing_Tracks]

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

[@ezikhoyo]

About the empty paragraphs: There is actually a selector, that's like :empty, but it includes whitespaces. It's called blank. "p:blank" would select all paragraphs containing nothing at all, HTML comments or whitespaces+new lines (doesnt matter if its one line, or 20 new lines filled with whitespaces).

[@KevinPowell]

Sadly it's not supported anywhere though :\

[@lawrencedoliveiro9104]

Yeah, I go by MDN. I like to stick to features where the browser compatibility matrix shows an all-green row. In the case of “:blank”, it’s still all red ... 😞

[@blasfah1909]

Cool!

[@lukaszpiotrluczak]

Letting you know :)