Focus
About
The :focus pseudo-class matches the element that is currently focused. Interactive elements like buttons and links can be focused by default. For non-interactive elements, you can add the tabindex attribute to make them focusable.
Buttons
Buttons and other interactive elements like hyperlinks can be focused by default. The are focused when you click on them or tab to them.
- Click on the
buttonto make the selector match
Non-interactive elements
Non-interactive elements like a div can be focused by adding the tabindex attribute.
- Click on the
divto make the selector match
Focus me
Nested elements
The :focus pseudo-class does not match parent elements of the focused element. Interactive elements like buttons cannot be nested but the selector works on other elements like a div.
- Click on the child
divto make the selector match
Focus me (parent)
Focus me (child)