Pseudo-classes and Pseudo-elements

This page demonstrates common CSS pseudo-classes (state-based selectors) and pseudo-elements (virtual elements like parts of text).

1) Link States: `:link`, `:visited`, `:hover`, `:active`, `:focus`

Example One Example Two Google Wikipedia

2) Interaction: `:hover`, `:active`, `:focus`, `:disabled`

3) Negation and Structure: `:not()`, `:nth-child()`, `:first-child`, `:last-child`

Tag Highlighted Another More

Row 1
Row 2
Row 3
Row 4
Row 5

4) Pseudo-elements: `::before` and `::after`

Decorated heading using ::before and ::after

5) `::first-letter` and `::first-line`

Drop caps are a classic layout effect. The first letter of this paragraph is styled bigger using ::first-letter.

Only the first line of this paragraph is transformed to uppercase to demonstrate ::first-line. Resize the window or change zoom to see where the first line ends.

6) `::selection`, `::marker`, and `::placeholder`

Try selecting this text with your mouse to see custom selection color.

Custom blue bullet via ::marker
Second item
Third item

Pseudo-classes and Pseudo-elements

1) Link States: :link, :visited, :hover, :active, :focus

2) Interaction: :hover, :active, :focus, :disabled

3) Negation and Structure: :not(), :nth-child(), :first-child, :last-child

4) Pseudo-elements: ::before and ::after