CSS CSS Basics (2014) Basic Selectors Pseudo-Classes

Difference between active and focus

Can some one explain to me the difference between active and focus with examples

Thank you in Advance

2 Answers

Kevin Dang
Kevin Dang
8,621 Points

Focus seems to relate more with input elements. You may want to target a user who is typing into a particular field of your form. The best way would be to wait for the user be 'in focus' of this particular input field (by default, browsers add a border highlight around an input field when you are in focus).

Active seems to correspond more with a mouse-click interaction with a button or link. If the user clicks on a button, you would target this action with the :active pseudo-class

Clayton Perszyk
MOD
Clayton Perszyk
Treehouse Moderator 46,805 Points

:focus represents the state when the element is currently selected to receive input and :active represents the state when the element is currently being activated by the user.