# Pseudo-classes & Pseudo-elements — CSS

Source: https://www.geekswithgeeks.com/en/css/css-pseudo

> Style states and sub-parts of an element without extra markup.

## Pseudo-classes

A **pseudo-class** (single colon `:`) targets a special state or position: `:hover`, `:focus`, `:first-child`, `:nth-child(2)`, `:last-of-type`.

## Pseudo-elements

A **pseudo-element** (double colon `::`) targets a sub-part of an element: `::before`, `::after`, `::first-line`, `::placeholder`.

## Hover and generated content

`::before` needs `content` to render, even if empty.

```css
button:hover {
  background-color: #1e40af;
}

.required::after {
  content: " *";
  color: red;
}
```

## One colon vs two

State/position → single colon (`:hover`). Sub-part/generated content → double colon (`::before`). Browsers still accept `:before` for legacy reasons, but write `::before`.