Questions
8 of 50
1What is a pseudo-class in CSS?
2How are pseudo-classes different from pseudo-elements?
3What is the syntax of a pseudo-class in CSS?
4Give some commonly used pseudo-classes.
5What does the :hover pseudo-class do?
6What’s the purpose of the :active pseudo-class?
7How does the :visited pseudo-class work for links?
8What is the :focus pseudo-class used for?
9What does the :checked pseudo-class do?
10How does the :disabled pseudo-class behave?
11What is the difference between :first-child and :first-of-type?
12How do :nth-child() and :nth-of-type() differ?
13How do you select every odd or even element using pseudo-classes?
14How can you style an element when it’s being hovered over along with its child?
15What does the :not() pseudo-class do?
16How can you use multiple pseudo-classes together?
17What is the difference between :link and :visited?
18What does the :target pseudo-class represent?
19How can you use :empty to detect empty elements?
20How does the :root pseudo-class differ from the html selector?
21What does the :valid and :invalid pseudo-class do?
22How can you use :required and :optional pseudo-classes in forms?
23What is the use of :in-range and :out-of-range?
24What does :read-only and :read-write do?
25How can you style an input field when it’s autofilled?
26How does the :focus-within pseudo-class work?
27What’s the difference between :focus and :focus-visible?
28What is the purpose of the :placeholder-shown pseudo-class?
29How can you style a checkbox when it is checked or unchecked?
30How can you style invalid form inputs without JavaScript?
31Can pseudo-classes be chained together? Give an example.
32What is the specificity of pseudo-classes compared to normal selectors?
33How can you use :not() effectively to exclude elements from styling?
34How does :has() pseudo-class work, and why is it powerful?
35Is :has() supported in all browsers?
36How does :is() differ from :where() in terms of specificity?
37How can you combine :is() or :where() with other selectors for cleaner code?
38What’s the difference between :nth-child() and :nth-last-child()?
39How can you style only the last element of a list using pseudo-classes?
40What does the :lang() pseudo-class do?
41How do you change a button’s color when hovered but not when disabled?
42How can you highlight the current section in a menu using :target?
43How can you style a form field differently when focused and valid?
44How do you style every third list item differently?
45How can you style alternate table rows without adding extra classes?
46How do you hide empty <p> tags using pseudo-classes?
47How can you style the parent when any child inside it is focused?
48How can you highlight a link only when it’s both focused and hovered?
49How can you style the first letter of only the first paragraph using pseudo-classes?
50How would you use :has() to select a <div> that contains an image?
CSSCSS
Basics
Selectors
Box model
Text formatters
Positioning
Pseudo classes
Pseudo elements
Flexbox
Grid
Display
Combinators
Overflow
Breakpoint
Transformation and Transition
Frameworks
Everything else
08 / 50

What is the :focus pseudo-class used for?

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. 1

    Use :focus to provide clear visual feedback for keyboard and accessibility users.

  2. 2

    Avoid removing focus indicators entirely; if customizing, ensure a visible alternative exists.

  3. 3

    Combine with :hover and :active for consistent interactive styling.

  4. 4

    Test focus styles across browsers and devices to ensure accessibility compliance.

Scenario Questions

0-2 years experience

  1. 1We have a text input in a sign‑up form; how would you use :focus to highlight it when the user tabs to it?
  2. 2A button looks the same when activated via keyboard. What CSS would you add to give it a visible focus state?
  3. 3If you apply :focus to a plain <div>, why might you not see any effect?

2-5 years experience

  1. 1Our modal dialog makes a <div> focusable with JavaScript, but the focus style isn’t showing. Walk me through how you’d debug this.
  2. 2The design team wants to replace the native focus outline with a custom box‑shadow. What trade‑offs should you consider?
  3. 3Why might a :focus rule work in Chrome but not in Safari for a <select> element, and how would you fix it?

5-8 years experience

  1. 1In a large application with many interactive components, how would you create a consistent focus‑styling strategy that works across browsers and respects user preferences?
  2. 2If we need to support high‑contrast mode and also let users disable animations, how does that affect your implementation of :focus?
  3. 3Describe the process you’d use to audit the app for missing focus handling and fix those issues at scale.

8+ years experience

  1. 1Our legacy codebase adds focus classes via JavaScript. How would you plan a phased migration to native :focus pseudo‑classes while avoiding regressions?
  2. 2Multiple teams need a shared approach to focus states that integrates with our design‑token system and theming. What guidelines would you establish?
  3. 3When rolling out a new global focus‑style across many services, how would you coordinate rollout, testing, and backward compatibility?

Follow-up Questions

  • How would you ensure your focus styles remain accessible for keyboard users?
  • What are the risks of removing the default focus outline without a replacement?
  • Can you explain the difference between :focus and :focus-visible?
Share

Share via WhatsApp, X, Facebook, LinkedIn or copy link. Open Graph preview enabled.