FREE 2024 Web Dev Roadmap

Anchor Is The Best New CSS Feature Since Flexbox

I Recreated Shadcn’s Docs In 30 Minutes With This Amazing Tool

This New Node Feature Is Super Convenient

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: https://youtu.be/K6CWjkDgQnE
CSS :has Selector Article: https://blog.webdevsimplified.com/2022-09/css-has-selector


🌎 Find Me Here:

My Blog: https://blog.webdevsimplified.com
My Courses: https://courses.webdevsimplified.com
Patreon: https://www.patreon.com/WebDevSimplified
Twitter: https://twitter.com/DevSimplified
Discord: https://discord.gg/7StTjnR
GitHub: https://github.com/WebDevSimplified
CodePen: https://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

I Love This CSS Focus Hack

FREE 2024 Web Dev Roadmap

Anchor Is The Best New CSS Feature Since Flexbox

I Recreated Shadcn’s Docs In 30 Minutes With This Amazing Tool

This New Node Feature Is Super Convenient