What is the :focus pseudo-class used for?

Q: What is the :focus pseudo-class used for?

The `:focus` pseudo-class in CSS applies styles to an element when it receives focus. This typically occurs when a user clicks on an input field, navigates to a button using the keyboard, or interacts with any focusable element. It provides visual feedback indicating that the element is active and ready for interaction. /* Input field border changes on focus */ input:focus { border-color: steelblue; outline: none; /* remove default outline */ box-shadow: 0 0 5px rgba(70, 130, 180, 0.5); } /* Button highlight on focus */ button:focus { background-color: lightblue; outline: none; box-shadow: 0 0 5px rgba(70, 130, 180, 0.5); } Focus Me In this example, when the input field or button receives focus, its border and shadow change, providing a clear visual indicator of focus. Use `:focus` to provide clear visual feedback for keyboard and accessibility users. Avoid removing focus indicators entirely; if customizing, ensure a visible alternative exists. Combine with `:hover` and `:active` for consistent interactive styling. Test focus styles across browsers and devices to ensure accessibility compliance.

Difficulty: 3/10

accessibility, user interaction, CSS selectors

Understanding the :focus Pseudo-Class

The :focus pseudo-class in CSS applies styles to an element when it receives focus. This typically occurs when a user clicks on an input field, navigates to a button using the keyboard, or interacts with any focusable element. It provides visual feedback indicating that the element is active and ready for interaction.

Example: Using :focus

In this example, when the input field or button receives focus, its border and shadow change, providing a clear visual indicator of focus.

Best Practices

1
Use :focus to provide clear visual feedback for keyboard and accessibility users.
2
Avoid removing focus indicators entirely; if customizing, ensure a visible alternative exists.
3
Combine with :hover and :active for consistent interactive styling.
4
Test focus styles across browsers and devices to ensure accessibility compliance.

Scenario Questions

0-2 years experience

Follow-up Questions