I Love This CSS Focus Hack

The CSS :focus state is simple on the surface, but there is actually quite a lot going on behind the scenes. There are 3 total :focus states you can use in CSS and even a secret fourth state that make :focus much more complicated than it may first appear. In this video I go over everything you need to know about CSS :focus states.
📚 Materials/References:
CSS :has Selector Video: • This Is So Much More T...
CSS :has Selector 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:29 - :focus
01:16 - :focus-visible
03:05 - :focus-within
04:19 - :focus-visible-within
05:38 - Use Cases
#CSSFocus #WDS #CSS

[@LePhenixGD]

The :has pseudo-class really makes CSS easier

[@aer0449]

Kyle, bro I took your CSS course and I loved it .... Anyone looking to drastically improve on CSS do buy his course, its short and to the point .... I am so thankful to you brother ... Amazing work ❤

[@bogdanterzic9297]

Link to this course?

[@lexidugo]

This came at just the right time !!! Thanks so much

[@saqibkhanz8417]

Waiting for your lengthy project-based videos.

[@specializer222]

I love this short videos about functions in CSS 😍

[@bharathnaidu4636]

you always rocks thanks for the content

[@akoladebode-ajayi327]

Thank you sir 😊

[@dragenn]

This is invaluable!

[@WebDevelopmentWithSS]

This video is amazing.

[@akramilyas6030]

thanks for all

[@user-ko1cw6mv4q]

❣️ great video

[@imnikki00]

awwwwwwwwwwww thank you ! Im great fan of yours sir

[@ArielFerro]

Wow! I had no idea about those CSS selectors for controlling focus. This could spark a really interesting discussion about the accessibility advantages of each approach. But I definitely want to thank you for addressing such a crucial issue for people with low vision by presenting alternative techniques to the traditional ones. Kudos to you!

[@Frexuz]

Is the has(focus-visible) doable in tailwind? PS: When you tabbed between the inputs back and forth, as a color-impaired person, I basically didn't see any change between "black" and "red" (and the input cursor is incredibly thin). Please use "blue" in the future :))

[@ajiteshmishra0005]

What is the difference of using in header and body.

[@rayyanabdulwajid7681]

I have made a click drop-down using css only using css "focus outside". When i click outside the drop-down, the drop-down closes. This was not possible when we were using css checkbox approach

[@abdullaahmad5503]

Video on vh and dvh please

[@alexkuehne86]

That means :focus-within could also be replaced with :has(:focus)?

[@rishiraj2548]

🙂👍🎉

[@sushantchoudhary07]

first 🥇

[@neimado]

Please calm down the head shaking while you talk, it's kind of distracting.

[@jelilabudu]

I get your frustration. However, the most important thing you need is to pay attention to is the message. I often watch people with fast speech, native accents, etc, which makes it difficult for me to grasp at once, what they're trying to put across. So, I either lower the speed or, I replay any section part that I don't not understand.

[@YO-BIZZY]

That’s the best part tf

[@MrHellmager]

People will really hate no matter what huh 😅

[@neimado]

@@MrHellmager It's not called "hate", it's called *constructive criticism*. Imagine thinking the only way to communicate is either praise or "hate".

[@rs832]

That's a weird way to say "thank you for the very helpful free content!"

[@ezwtwrziehag1736]

this isnt secret, people know this long ago