Utilko logo Utilko
pseudo-class

:focus Pseudo-Class

Applies while an element has keyboard or programmatic focus. It is essential for accessible focus rings on form controls and links.

:focus

Example

input:focus { outline: 2px solid #005fcc; } /* HTML: <input type="text"> */

✓ Matches

  • <input> while focused
  • <button> while focused
  • <a href="#"> while focused

✗ Does not match

  • <input> when not focused
  • <div>hello</div> that is not focusable

Browser support

Universal support in all browsers since CSS2.

Related selectors

:hover Pseudo-Class
:hover
:checked Pseudo-Class
:checked
:has() Relational Pseudo-Class
:has(selector)
:first-child Pseudo-Class
:first-child
:nth-child() Pseudo-Class
:nth-child(An+B)

← All CSS selectors · CSS selectors cheat sheet