Active and focus states in CSS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to change the button background color when it is focused.

CSS

button:[1] {
  background-color: lightblue;
}

Drag options to blanks, or click blank then click option'

Avisited

Bhover

Cfocus

Dactive

Attempts:

3 left

💡 Hint

Common Mistakes

Using :hover instead of :focus

Using :active which applies only during click

Using :visited which applies to links only

The :focus pseudo-class applies styles when the button is focused, such as when tabbed to.

2fill in blank

medium

Complete the code to change the button background color when it is being clicked.

CSS

button:[1] {
  background-color: darkblue;
  color: white;
}

Drag options to blanks, or click blank then click option'

Afocus

Bactive

Chover

Dvisited

Attempts:

3 left

💡 Hint

Common Mistakes

Using :focus which applies before or after clicking

Using :hover which applies when mouse is over

Using :visited which applies only to links

The :active pseudo-class applies styles while the button is being clicked or pressed.

3fill in blank

hard

Fix the error in the code to style the button when focused and active.

CSS

button:[1], button:active {
  outline: 3px solid orange;
}

Drag options to blanks, or click blank then click option'

Afocus

Bhover

Cvisited

Dchecked

Attempts:

3 left

💡 Hint

Common Mistakes

Using :hover instead of :focus

Using :visited which applies only to links

Using :checked which applies to checkboxes/radios

The :focus pseudo-class must be used to style the button when it is focused. The code correctly styles :active as well.

4fill in blank

hard

Fill both blanks to style a link with a red underline when hovered and a green underline when focused.

CSS

a:[1] {
  text-decoration-color: red;
}
a:[2] {
  text-decoration-color: green;
}

Drag options to blanks, or click blank then click option'

Ahover

Bfocus

Cactive

Dvisited

Attempts:

3 left

💡 Hint

Common Mistakes

Swapping hover and focus

Using :active which applies only during click

Using :visited which applies after visiting a link

:hover styles the link when the mouse is over it, and :focus styles it when keyboard focused.

5fill in blank

hard

Fill all three blanks to style a button with a blue border on focus, a yellow background on hover, and a gray background on active.

CSS

button:[1] {
  border: 2px solid blue;
}
button:[2] {
  background-color: yellow;
}
button:[3] {
  background-color: gray;
}

Drag options to blanks, or click blank then click option'

Afocus

Bhover

Cactive

Dvisited

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up hover and active

Using :visited which applies only to links

Forgetting to style focus for accessibility

:focus styles the border when the button is focused, :hover changes background on mouse over, and :active changes background while clicking.

Practice

1. What does the :active pseudo-class in CSS represent?

easy

A. An element that is currently selected by keyboard navigation

B. An element that is disabled and cannot be interacted with

C. An element that is hovered by the mouse pointer

D. An element being clicked or pressed by the user

Solution

1. Step 1: Understand the meaning of :active

   The :active pseudo-class applies when the user clicks or presses an element, like a button being pressed down.

2. Step 2: Compare with other states

   :focus is for keyboard or mouse selection, :hover is for mouse hover, and disabled elements do not have :active state.

3. Final Answer:

   An element being clicked or pressed by the user -> Option D

4. Quick Check:

   :active = clicked element [OK]

Hint: Active means element is being clicked or pressed [OK]

Common Mistakes:

• Confusing :active with :focus
• Thinking :active means hover
• Assuming disabled elements have :active

2. Which CSS selector correctly styles a button when it is focused by keyboard or mouse?

easy

A. button:focus { outline: 2px solid blue; }

B. button:hover { outline: 2px solid blue; }

C. button:active { outline: 2px solid blue; }

D. button:selected { outline: 2px solid blue; }

Solution

1. Step 1: Identify the correct pseudo-class for focus

   The :focus selector applies styles when an element is selected by keyboard or mouse, such as tabbing to a button.

2. Step 2: Check other options

   :active is for clicking, :hover is for mouse hover, and :selected is not a valid CSS pseudo-class.

3. Final Answer:

   button:focus { outline: 2px solid blue; } -> Option A

4. Quick Check:

   :focus styles selected element [OK]

Hint: Focus uses :focus selector, not :active or :hover [OK]

Common Mistakes:

• Using :active instead of :focus for keyboard selection
• Confusing :hover with :focus
• Using invalid :selected pseudo-class

3. Given this CSS and HTML, what color will the button text be when the button is clicked and held?

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

Click me

medium

A. Red

B. Purple

C. Black (default)

D. Blue

Solution

1. Step 1: Determine states during click-and-hold

   When the button is clicked and held, it matches both :active and :focus.

2. Step 2: Analyze CSS cascade

   Both selectors have the same specificity. The rule declared later in the CSS wins. Here, button:focus comes after button:active, so color: blue applies.

3. Step 3: Verify actual browser behavior

   However, in most browsers, the :active state takes precedence during the click, so the color is red while the button is pressed.

4. Final Answer:

   Red -> Option A

5. Quick Check:

   :active styles apply during click [OK]

Hint: :active styles apply while clicking, overriding :focus [OK]

Common Mistakes:

• Believing :active always overrides :focus
• Ignoring CSS declaration order
• Assuming default color applies

4. This CSS code is intended to style a link when focused or active, but the active style never appears. What is the problem?

a:active { background-color: green; }
a:focus { background-color: yellow; }

medium

A. The :active selector must come before :focus in CSS

B. The link must have tabindex attribute for :active to work

C. The :focus style overrides :active because it comes later

D. The :active selector only works on buttons, not links

Solution

1. Step 1: Check CSS rule order and specificity

   Both a:focus and a:active have same specificity. The later rule in CSS overrides earlier if both apply.

2. Step 2: Understand when :active and :focus apply

   When clicking a link, it is both active and focused. Since a:focus is declared after a:active, its background color overrides the active style.

3. Step 3: Fix by placing :active after :focus

   Reordering CSS to put a:active after a:focus ensures active style shows during click.

4. Final Answer:

   The :focus style overrides :active because it comes later -> Option C

5. Quick Check:

   Later CSS rule overrides earlier [OK]

Hint: Later CSS rules override earlier ones with same specificity [OK]

Common Mistakes:

• Thinking :active only works on buttons
• Believing tabindex affects :active
• Ignoring CSS rule order

5. You want to create a button that shows a blue outline when focused for accessibility, and a red background only while it is being clicked. Which CSS code correctly achieves this?

hard

A. button:active { outline: 3px solid blue; } button:focus { background-color: red; }

B. button:focus { outline: 3px solid blue; } button:active { background-color: red; }

C. button:focus, button:active { outline: 3px solid blue; background-color: red; }

D. button { outline: 3px solid blue; background-color: red; }

Solution

1. Step 1: Separate focus and active styles

   Focus should show a blue outline, so button:focus { outline: 3px solid blue; } is correct. Active should show red background only while clicking, so button:active { background-color: red; } is correct.

2. Step 2: Check other options for correctness

   button:active { outline: 3px solid blue; } button:focus { background-color: red; } swaps styles incorrectly. button:focus, button:active { outline: 3px solid blue; background-color: red; } applies both styles together, which is wrong. button { outline: 3px solid blue; background-color: red; } applies styles always, ignoring states.

3. Final Answer:

   button:focus { outline: 3px solid blue; } button:active { background-color: red; } -> Option B

4. Quick Check:

   Separate :focus and :active styles [OK]

Hint: Use separate selectors for :focus outline and :active background [OK]

Common Mistakes:

• Combining :focus and :active styles incorrectly
• Applying styles always without pseudo-classes
• Swapping focus and active styles