Focus, Focus Within, Focus Visible Psuedo Selectors

Got to understand the difference between these 3 and how to use them. :focus is activited when a element is clicked, tapped or tabbed over by the keyboards Tab key. :focus-within selects the element if any of it's children have been clicked, tapped or tabbed over by the keyboards Tab key and :focus-visible is used to apply focus when the keyboards Tab key is used to nativate towards it and not focus via and other focus events, this is usually used when you want to retain the theme of the website, and also make it accessible for users using keyboards to navigate around the website.

References: 1, 2, 3, 4

Footnotes

  1. Article on focus psuedo selectors - https://bharathvaj-ganesan.medium.com/focus-vs-focus-within-vs-focus-visible-2db18593495b ↩

  2. focus on MDN - https://developer.mozilla.org/en-US/docs/Web/CSS/:focus ↩

  3. focus-within on MDN - https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within ↩

  4. focus-visible on MDN - https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-visible ↩

← Back to all logs