# Pseudo classes

[CSS Pseudo-classes](https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes) target element by their state than their tag name or attributes. As such they are quite useful for providing feedback to user's actions. There are many different standard and experimental pseudo-classes, but there are ones that get used more often than others.

### Link-related States <a href="#link-related-states" id="link-related-states"></a>

An `<a>` can have different states: the two most basic are `:link` and `:visited`. The [`:link`](https://developer.mozilla.org/en-US/docs/Web/CSS/:link) pseudo-class refers to any `<a>` tag with an `href` attribute that had not been visited by the user. Whereas the [`:visited`](https://developer.mozilla.org/en-US/docs/Web/CSS/:visited) pseudo-class refers to any `<a>` that has already been visited by the user.

{% tabs %}
{% tab title="CSS" %}
```css
/* selects any <a> with an href attribute */
a:link {
  color: cadetblue;
}

/* selects any <a> that has been visited */
a:visited {
  color: indianred;
}
```
{% endtab %}
{% endtabs %}

The `:link` and `:visited` pseudo-classes are often associated with the `:hover` and `:active` pseudo-classes, which we will talk about in the next section. Because these styles have equal specificity, they can be easily overridden by another. So it is important to follow the _LVHA-order_ (`:link`, `:visited`, `:hover`, `:active`)

### Mouse-related States <a href="#mouse-related-states" id="mouse-related-states"></a>

The mouse can trigger many states of an element, as such there are many different pseudo-classes that can be used. Two of the most common are `:hover` and `:active`. The [`:hover`](https://developer.mozilla.org/en-US/docs/Web/CSS/:hover) pseudo-class matches an element when the user interacts with it using pointing device, typically by moving the mouse cursor over the element. The [`:active`](https://developer.mozilla.org/en-US/docs/Web/CSS/:active) pseudo-class targets an element that is being activated by user, which typically occurs when the use is pressing down on the primary mouse button.

{% tabs %}
{% tab title="CSS" %}
```css
a:hover {
  background-color: goldenrod;
  color: white;
}

a:active {
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}
```
{% endtab %}
{% endtabs %}

While generally associated with `<a>` and `<button>` elements, the `:hover` and `:active` pseudo-classes can be applied to most elements.

### Position-related States <a href="#position-related-states" id="position-related-states"></a>

The position an element appears among its siblings can also be targeted. Pseudo-classes in the group can be extremely useful when targeting certain elements within a large group.

The [`:first-child`](https://developer.mozilla.org/en-US/docs/Web/CSS/:first-child) and [`:last-child` ](https://developer.mozilla.org/en-US/docs/Web/CSS/:last-child) will target the first element and the last element, respectively, of a group of sibling elements if it matches the prefix selector.

{% tabs %}
{% tab title="CSS" %}
```css
/* matches the first <p> tag */
p:first-child {
  font-weight: bold;
}

/* matches the last <p> tag */
p:last-child {
  font-style: italic;
}
```
{% endtab %}
{% endtabs %}

The [`nth-child`](https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child) matches elements based on their position in a group of siblings. This pseudo-class will take a single argument that describes the pattern for matching the element. The values can be a number, a keyword (`odd`, `even`) or a functional notation.

{% tabs %}
{% tab title="CSS" %}
```css
/* selects the second <li> element */
li:nth-child(2) {
  background-color: indianred;
  color: white;
}

/* selects alternating rows of a table */
tr:nth-child(odd) {
  background-color: #f7f7f7;
}

/* selects every 4th box starting with the first one */
.box:nth-child(4n + 1) {
  background-color: cadetblue;
}
```
{% endtab %}
{% endtabs %}

### Form-related States <a href="#form-related-states" id="form-related-states"></a>

A form, and specifically the inputs of a form, may have several different states. The following pseudo-classes can be used to target the different states of form inputs.

* The [`:focus`](https://developer.mozilla.org/en-US/docs/Web/CSS/:focus) pseudo-class represents an element that has received focus, which is generally triggered by the clicking on or tabbing to the element.
* The [`:required`](https://developer.mozilla.org/en-US/docs/Web/CSS/:required) pseudo-class represents any `<input>`, `<select>`, or `<textarea>` that has the `required` attribute. **NOTE:** The `required` attribute is used to force the user to provide a value for that specific form element before the form will be submitted.
* The [`:optional`](https://developer.mozilla.org/en-US/docs/Web/CSS/:optional) pseudo-class represents any `<input>`, `<select>`, or `<textarea>` that does not have the `required` attribute.
* The [`:valid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:valid) pseudo-class represents any `<input>` or form element whose value validates successfully.
* The [`:invalid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid) pseudo-class represents any `<input>` or form element whose value fails to validate.
* The [`:read-only`](https://developer.mozilla.org/en-US/docs/Web/CSS/:read-only) pseudo-class represents any `<input>` or `<textarea>` that is not editable by the user.
