The :focus pseudo class in CSS is used for styling an element that is currently targeted by the keyboard, or activated by the mouse.
The :focus selector is used to select the element that has focus.
As with other pseudo-class selectors (those that begin with a ":"), it is recommended to precede :focus with a tag name or some other selector; otherwise, the universal selector ( "*" ) is implied. In other words, the bare $( ":focus" ) is equivalent to $( "*:focus" ). If you are looking for the currently focused element, $( document.activeElement ) will retrieve it without having to search the whole DOM tree.
The :focus pseudo-class selector specifies the element with focus. In the following example, the border property will be set for the <input > element that has focus.