Quick guide to CSS focus states

We have three different pseudo-classes for dealing with focus states, but why do we need three of them? Well, each one is a bit different and allows us to do different things, so in this video I explore :focus, :focus-within, and :focus-visible to show what each one does, and how they’re different from the others.
🔗 Links
✅ Form from this video: codepen.io/kevinpowell/pen/px...
✅ Hamburger from this video: codepen.io/kevinpowell/pen/Ba...
✅ Video where I made the hamburger menu: • Why you shouldn't use ...
⌚ Timestamps
00:00 - Introduction
00:15 - :focus
01:00 - :focus-within
02:57 - :focus-visible
#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!

[@twrkhanasparukh]

Four years in frontend and still learning new stuff about css. Thanks Kevin!

[@petarkolev6928]

Kevin, after all these years of watching your videos and learning something new every time you didn't stopped to amaze me, not even once!

[@CZghost]

One thing about the "focus" state and the "outline" property is that you can actually use "outline: none" in a CSS reset (the asterisk notation: "* { /* reset properties go there */ }"). But you still have to keep in mind to then re-add the outline to every single focusable element, which makes it quite tedious. Often times webdev designers want to clear the padding of the entire page so they can place some sort of wrapper behind it, and clear border of an image inside of a link, which was the default styling in Internet Explorer (unlike other browsers). Since Internet Explorer is discontinued now, that shouldn't be a problem. The asterisk CSS reset is pretty popular, but I'm not really a big fan of it, it's just a very lazy way to make a web page.

[@KevinPowell]

Yup, super lazy, and I've been on way too many sites where I can't keyboard navigate at all because I have no idea where I am on the page. I'm an abled user, and it annoys me, I can only imagine for users who primarily, or only, navigate with the keyboard.

[@Noam-Bahar]

​@@KevinPowell* { display: none; }

[@chainedbeauty]

Exactly what i was looking for today! Thanks for keeping it clear and simple!

[@lukas.webdev]

Awesome as always! Keep it up!😉🔥

[@heslami32]

Very useful Kevin. Thanks for sharing. Keeping these things in mind while coding, improves accessibility for users.

[@bhishek_]

You solved my problems regarding focus states. Thank you sir ❤

[@vitorgobatogercov8879]

Thanks Kevin! This came right on time :) great video as always

[@wonderbreadwilliams]

Thanks for doing what you do. Your help is greatly appreciated.

[@piyushaggarwal5207]

I was having issues with focus on button. Now, going to use focus-visible. Awsesome!

[@TheKer7]

1000th like! Felt real good. Love the content, very relevant to me as I write CSS almost every day.

[@JimKernix]

Excellent - more videos like this please!

[@gasparsigma]

Nice. I've been using focus for years and never knew this difference to focus-visible

[@WickyDesign]

Awesome! Thanks for the tutorial!

[@atetraxx]

Great stuff subscribed

[@DamienWhite]

I literally spent ages Googling this the other day, what a coincidence

[@syonukr]

Hey, Kevin. Thank you as always. A small tip, tweak your sound offset to a bit ahead. Right now it’s late. 🤪

[@shakofarhad876]

Thank you for the videos. I have learned a lot throughout the years from you! I have been using :focus:not(:active) to not have lingering focus styles. How would you rate this vs focus-visible? Would you change it all to focus-visible instead?

[@spatialoptic]

Nice!!!

[@mohitcodeswell]

Cool 🎉

[@lukas.webdev]

Very cool. 😉

[@KayinAngel]

Adjacent to something I'm trying to do right now: is there a focus-within event listeners in JS? Im trying to figure out how to get a bag item with a sub menu to open (and set aria attributes) when tabbing onto the item and also closing when tabbing out. And for whatever reason I feel like i'm over engineering it.

[@KevinPowell]

Good question. I'm not entirely sure tbh. With JS you can check for focus though, with active element, and then you can find the parent or whatever you need from there. Little bit more work though

[@KayinAngel]

@@KevinPowell So, I'm trying to make a nav bar component with fly-out sub menus. The structure is just an unordered list with a child unordered list for the sub menu. However, I actually have three three requirements that are doing my head in: 1) the sub menus appear on hover. 2) the trigger may or may not be an active link to a page (hence the hover) 3) has to be accessible with tab navigation - meaning, it wouldn't open the menu on 'enter' because that would sometimes be a top level link. it would have to show the sibling UL menu when it's focused. This seems simple in theory, but I'm running into things like "I need it to expand the item on LI hover, not the child A/SPAN because I need the thing to stay open when hovering the submenu, but also focus is happening on the A/SPAN so how do I treat that as a focus...." Also, I'm trying to handle toggling aria attributes correctly. I haven't found anyone doing quite this exact UI behaviour. But yeah, i figured I'd do something with active element. Thanks.

[@kacperkonieczny7333]

0:32 IIRC you said it's better to use "outline: transparent" than "outline: none" because none will never display an outline and transparent will display it in high-contrast mode. I am right?

[@KevinPowell]

if you really want to remove it, then yeah, having a transparent color is highly recommended :)

[@lukas.webdev]

I'm pretty sure you are... 😉

[@VeitLehmann]

Yep, also very handy if you want to style the focus state with e. g. a box-shadow for a different visual effect in normal vision mode. Box-shadows are not shown in high-contrast mode iirc. So outline-color: transparent will ensure the focus-styles to work for high-contrast users.

[@jewelofnile2424]

As a summary can I use focus-visible everywhere a user clicks and will it be safe? Are there any cases where it won't be working?

[@niklasnilsson5942]

I have a use-case for the :focus and the :focus-visible where i need to have different styles to them. But it is impossible to combine them on an input field? The focus-visible will overrule :focus 😢

[@EricFressange]

Next one needed :focus-visible-within ^^ Or not because :has will do the job

[@mhthewriter871]

Also Make video for wordpress meta code for blog post view count, lime eye

[@KevinPowell]

A bit of the same answer again, sadly! I don't cover WordPress on my channel. It's mostly vanilla CSS, with some HTML and JS sprinkled in.

[@mhthewriter871]

Please sir, Try and afford for me and your community for elementor tutorial we still waiting for this

[@RichardNobel]

*KZbin:* _"Transcripts have moved to the description."_ *Me:* _"Why, KZbin, _*_WHY_*_ would you mess up this UI/UX element so bad?!"_ I cannot understand this design change. 🙄

[@Mempler]

I usually remove all outlines, especially for keyboard users. Man i hate vim users /s

[@mhthewriter871]

Please make tutorial for elementor like this, i really need help for elementor

[@KevinPowell]

Elementor really isn't something I use, sorry! I'm sure there are some great channels out there that focus on it though :)

[@Shacontrol]

thank you Kevin for your videos, I've learnt a lot from you

[@VeitLehmann]

I want :focus-visible-within. Oh, it's there, via :has(:focus-visible). So, Mozilla, pleeease add support for :has() asap, it's long overdue!