Pseudo-classes

Welcome to our CSS documentation blog where we delve into the intriguing world of pseudo-classes. In this article, we'll take a detailed look at the basics of pseudo-classes in CSS, focusing on link, visited, hover, and active pseudo-classes. We'll cover what they are, how they work, and provide examples to help you understand their practical application.

What are Pseudo-classes?

Pseudo-classes are keywords that specify a special state of the selected elements. They allow you to style elements based on user interaction or dynamic changes to the document structure. Pseudo-classes are preceded by a colon (:) in CSS.

Link Pseudo-class (:link)

The :link pseudo-class selects links that have not yet been visited by the user. It applies styles to links that are in their default state.

Example:

a:link {
  color: blue;
  text-decoration: none;
}

Visited Pseudo-class (:visited)

The :visited pseudo-class selects links that have been visited by the user. It applies styles to links that the user has already interacted with.

Example:

a:visited {
  color: purple;
}

Hover Pseudo-class (:hover)

The :hover pseudo-class selects elements when the user hovers over them with the cursor. It's commonly used to provide visual feedback to the user.

Example:

button:hover {
  background-color: #ff0000;
  color: #ffffff;
}

Active Pseudo-class (:active)

The :active pseudo-class selects elements when they are being activated by the user. For example, when a user clicks on a link or presses a button.

Example:

button:active {
  transform: translateY(1px);
}

Combining Pseudo-classes

Pseudo-classes can be combined to create more specific styles. For example, you can style links differently when they are hovered over or when they are visited.

Example:

a:hover {
  text-decoration: underline;
}

a:visited:hover {
  color: #990099;
}

Conclusion

Pseudo-classes in CSS provide a powerful way to style elements based on user interaction and document state changes. By understanding and utilizing pseudo-classes such as link, visited, hover, and active, you can enhance the user experience and add interactivity to your web pages.