What is the difference between :focus and :active?

by

:focus and :active are two different states.

  • :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.

For example let’s say we have a <button>. The <button> will not have any state to begin with. It just exists. If we use Tab to give “focus” to the <button>, it now enters its :focus state. If you then click (or press space), you then make the button enter its (:active) state.

On that note, when you click on an element, you give it focus, which also cultivates the illusion that :focus and :active are the same. They are not the same. When clicked the button is in :focus:active state.

An example: 

<style type="text/css">
  button { font-weight: normal; color: black; }
  button:focus { color: red; }
  button:active { font-weight: bold; }
</style>
  
<button>
  When clicked, my text turns red AND bold!<br />
  But not when focused only,<br />
 where my text just turns red
</button>

edit: jsfiddle

More Related Contents:

  1. css3 nth of type restricted to class [duplicate]
  2. Why isn’t it possible to combine vendor-specific pseudo-elements/classes into one rule set?
  3. How can I write a ‘:hover’ condition for ‘a:before’ and ‘a:after’?
  4. What is the difference between a pseudo-class and a pseudo-element in CSS?
  5. Does CSS have a :blur selector (pseudo-class)?
  6. How to select the first, second, or third element with a given class name?
  7. Should I use CSS :disabled pseudo-class or [disabled] attribute selector or is it a matter of opinion?
  8. What’s the difference between html[lang=”en”] and html:lang(en) in CSS?
  9. What’s the difference between CSS3’s :root pseudo class and html?
  10. Why doesn’t this CSS :not() declaration filter down?
  11. CSS 3 nth of type restricted to class [duplicate]
  12. How to show the first N elements of a block and hide the others in css?
  13. Is there an opposite CSS pseudo-class to :hover?
  14. how do I make device specific selectors in css [closed]
  15. Is there a “previous sibling” selector?
  16. What does a space mean in a CSS selector? i.e. What is the difference between .classA.classB and .classA .classB?
  17. CSS selector for first element with class
  18. What does the “+” (plus sign) CSS selector mean?
  19. Is there a CSS selector by class prefix?
  20. How do I select an element based on the state of another element in the page with CSS?
  21. Does the order of classes listed on an item affect the CSS?
  22. Select all child elements recursively in CSS
  23. CSS “and” and “or”
  24. Using the last-child selector
  25. Why doesn’t the selector h3:nth-child(1):contains(‘a’) work?
  26. How can I select an nth child without knowing the parent element?
  27. How to select label for=”XYZ” in CSS?
  28. In which direction do selector engines read, exactly?
  29. What is the difference between :before and ::before?
  30. What is the difference between pseudo-classes and pseudo-elements?

Leave a Comment