lesson1Title

lesson2Title

lesson3Title

lesson4Title

lesson5Title

lesson6Title

lesson7Title

lesson8Title

lesson9Title

lesson10Title

lesson11Title

lesson12Title

lesson13Title

webIntroCssChapter1Title

webIntroCssChapter2Title

webIntroCssChapter3Title

webIntroCssChapter4Title

webIntroCssChapter5Title

# Pseudo-class 

A `CSS pseudo-class` is applied to style elements only when they are in a specific state (e.g., clicked, focused).

Pseudo-classes are used with a colon (`:`) following the selectors, with `:hover` being one of the most commonly used examples.

The hover pseudo-class applies styles when the mouse cursor hovers over an HTML element.

See the example below using the pseudo-class `:hover`.

<br />

```html title="HTML button with my-button class"
<html>
  <body>
    <button class="my-button">Hover Me</button>
  </body>
</html>
```

<br />

```css title="Applying CSS to my-button"
.my-button {
  display: inline-block;
  padding: 10px 20px;
  background-color: #0000ff;
  color: #fff;
  border-radius: 5px;
  transition: background-color 0.3s ease;
  border: none;
}

.my-button:hover {
  background-color: #ff0000;
}
```

The above CSS code styles a button (`<button>`) element with the class `.my-button`.

The `.my-button:hover` pseudo-class is used to change the background color to red when the mouse pointer hovers over the button.

Note that the `transition` property adds a smooth animation to the property's changes.

In this example, a transition effect of `0.3s` is applied to the `background-color` change, making the button's color change smoothly.

CSS pseudo-classes allow you to apply styles only in certain states. You use them by appending a colon (:) after the selector, which can change styles, for example, when the mouse cursor hovers over an element.

### Which of the following is most appropriate to fill in the blank?