# 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:**

```css
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:**

```css
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:**

```css
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:**

```css
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:**

```css
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.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://guvi.gitbook.io/fsd/docs/module-2-html-css-bootstrap/css/pseudo-classes.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.