Pseudo-classes are an interesting feature in HTML and CSS and is best learned through links.

So, I'm going to create a <a href> link to "www.devcamp.com" which you are able you to see on the browser.

If you see, the link has a purple color since that's the default color for a visited site. If you open this file in an incognito mode, you'll see a bright blue color. Now, let's say you want to customize this color. This is where pseudo classes come handy.

Go to styles.css and create custom attributes for the <a> tag.

a:link {
}

Inside this, change the default color to black.

Next, change the color of this link in its "visited" state to green by coding as so:

a:visited {
color: green;
}

Refresh the browse, and you'll see that it's green.

Next, we can even change the link's color for when the mouse hovers over it. I chose the same red color that are used in the previous sections.

a:hover {
color: #ab3939;
}

Lastly, there is a color for the active class.

a:active {
color: blue;
}

If you refresh, the color will be green to start with, to red when you hover over it, and blue after you click.

The final code is:

a:link {
  color: black;
}

a:visited {
  color: green;
}

a:hover {
  color: #ab3939;
}

a:active {
  color: blue;
}

Each of these states vary depending on how the user is interacting with the webpage.

So, this is how you can work with pseudo-class selectors.