Link States

[oldoc63]

• Links have four main states: normal (not clicked), hover, active (clicked), and visited.
• These four states have associated CSS pseudo-classes: :link, :hover, :active, and :visited.
• These four states can be used to give a full range of visual feedback to users about the status of their link interaction.
• The ordering of link state pseudo-class rules is important to reveal the proper information.
  • :link
  • :visited
  • :hover
  • :active
• This ordering will ensure that the rules cascade properly and the user can receive the most applicable visual feedback about the state of the link.

[oldoc63]

• Let’s add styling for different link states using pseudo-classes. Start by creating a rule to set the color to #466995 for any :visited tag.
• Create a rule to set the color of any :visited .question-link class elements to #ffffff. Because the question-link class is more specific than tags in general, this rule should override.
• Now, let’s add some behavior to cover the :active states. Create a rule to set all tags’ active color to #DBE9EE.
• Add a rule to style :active .question-links.