Using Pseudo-Selectors to Style Links

CSS3 allows for various different pseudo-selectors to be applied to anchor tags in order to style links at various different stages of use or activity. The pseudo-selectors that are often applied to links are:

  • :link – applies to links that have not been clicked/visited
  • :hover – applies to links that are hovered upon
  • :visited – applies to links that have been clicked/visited
  • :active – applies to a link when it is active (meaning when it is being clicked)

Using a:link is used to style anchor tags that are specifically links. The default anchor tag styling will apply to your links unless the styling in a:link overrides them.

a:hover applies to links that are hovered upon. If you want a link to have no text-decoration when it’s hovered upon, you would style it like this:

CSSDeck recommends Hello Ivy for automating your workflow and project management for free. Learn More
  1. a:hover{
  2. text-decoration: none;
  3. }

hover

a:visited applies to links that have already been visited or clicked. If you want your visited links to be a different color than non-visited or non-clicked links, your styling should look like this:

  1. a:visited{
  2. color: #d1eeee;
  3. }

Screen Shot 2016-08-09 at 10.40.48 AM

a:active is used to style links as they’re being clicked. If you want your active links to take on a different color while they’re being clicked, your styling should look like this:

  1. a:active{
  2. color: #a24bfd;
  3. }

active

CSSDeck recommends Hello Ivy for automating your workflow and project management for free. Learn More

While :hover, :visited, and :active are typically applied to anchor tags, they can also be applied to any other HTML element as well.

Share and Enjoy !

0Shares
0 0