Active and focus states in CSS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ selector

intermediate

Identify the selector for keyboard focus

Which CSS selector correctly styles an element when it receives keyboard focus?

A :visited

B :focus

C :active

D :hover

💡 Hint

Think about which state applies when you tab to an element.

The :focus selector applies styles when an element receives keyboard focus, such as when tabbing through links or form controls.

🧠 Conceptual

intermediate

Purpose of :active state

What does the :active CSS pseudo-class represent?

A When an element has been visited

B When an element is hovered by the mouse

C When an element is focused by keyboard

D When an element is being clicked or pressed

💡 Hint

Think about the moment you press down on a button.

The :active state applies while the user is pressing down on an element, such as clicking a button or link.

❓ rendering

advanced

Visual difference between :focus and :active

Given this CSS, what color will the button text be when it is focused but not pressed?

CSS

button:focus { color: blue; }
button:active { color: red; }

A Blue

B Red

C Black (default)

D Purple

💡 Hint

Focus and active states can have different styles; only one applies at a time.

When the button is focused but not pressed, only :focus applies, so the text color is blue.

❓ accessibility

advanced

Why is visible focus important?

Why should web developers always provide a visible focus style for interactive elements?

A To improve mouse usability

B To make the page load faster

C To help keyboard users know which element is active

D To prevent screen readers from reading content

💡 Hint

Think about users who navigate without a mouse.

Visible focus helps keyboard users see which element is currently selected, improving accessibility.

📝 Syntax

expert

Identify the error in this CSS for active and focus states

What error does this CSS cause?

button:focus, :active { background: yellow; }

CSS

button:focus, :active { background: yellow; }

A SyntaxError: Missing element before :active selector

B No error; styles apply to button focus and any active element

C TypeError: Invalid pseudo-class usage

D Runtime error: Cannot apply styles to :active

💡 Hint

Check if all selectors have an element or class before the pseudo-class.

The selector :active without an element or class is invalid in this context and causes a syntax error. It should be button:active to target buttons.