The :focus selector is used to select the element that has focus. It is allowed on elements that accept keyboard events or other user inputs.
More information at https://www.w3.org/TR/html5/editing.html#focusable
An element is focusable if all of the following conditions are met:
- The element's tabindex focus flag is set.
- The element is either being rendered or is a descendant of a
[canvas](https://www.w3.org/TR/html5/scripting-1.html#the-canvas-element)element that represents embedded content.
- The element is not inert.
- The element is not disabled.
In addition, each shape that is generated for an area element, any user-agent-provided interface components of media elements (e.g. a play button), and distinct user interface components of form controls (e.g. "up" and "down" buttons on an
<input type=number> spin control), should be focusable, unless platform conventions dictate otherwise or unless their corresponding element is disabled. (A single area element can correspond to multiple shapes, since image maps can be reused with multiple images on a page.)
Notwithstanding the above, user agents may make any element or part of an element focusable, especially to aid with accessibility or to better match platform conventions.