CSS Pseudo-classes Guide with Examples

CSS pseudo-classes are special keywords added to selectors that specify a state or condition of an element. They allow you to style elements dynamically based on user interactions, position, or other conditions without adding extra classes or JavaScript.

Basic Syntax

selector:pseudo-class {
  property: value;
}

Commonly Used Pseudo-classes

Interactive States
- Used to style elements based on user interactions.
- Examples:
  - :hover: Styles an element when the user hovers over it.
  - :focus: Styles an element when it gains focus (e.g., a form field clicked or tabbed into).
  - :active: Styles an element when it’s being clicked.
Example:
```
button:hover {
  background-color: lightblue;
}

input:focus {
  border: 2px solid blue;
}

a:active {
  color: red;
}
```
Try It Now
Structural Pseudo-classes
- Style elements based on their position in the DOM.
- Examples:
  - :first-child: Selects the first child of its parent.
  - :last-child: Selects the last child of its parent.
  - :nth-child(n): Selects the nth child (1-based index) of its parent.
  - :nth-of-type(n): Selects the nth child of a specific type.
  - :only-child: Selects an element if it’s the only child of its parent.
Example:
```
li:first-child {
  font-weight: bold;
}

li:nth-child(2) {
  color: green;
}

p:only-child {
  text-align: center;
}
```
Try It Now
Form States
- Style form elements based on their state.
- Examples:
  - :checked: Styles a checked checkbox or radio button.
  - :disabled: Styles disabled form elements.
  - :enabled: Styles enabled form elements.
  - :required: Styles required input fields.
  - :optional: Styles optional input fields.
Example:
```
input:checked {
  outline: 2px solid green;
}

input:disabled {
  background-color: lightgray;
}

input:required {
  border: 1px solid red;
}
```
Try It Now
Targeting Links
- Style links based on their state.
- Examples:
  - :link: Styles unvisited links.
  - :visited: Styles visited links.
Example:
```
a:link {
  color: blue;
}

a:visited {
  color: purple;
}
```
Try It Now
Dynamic Pseudo-classes
- React to dynamic conditions.
- Examples:
  - :not(selector): Selects elements that do not match the selector.
  - :empty: Selects elements with no children.
  - :root: Selects the root element of the document (usually <html>).
Example:
```
div:not(.active) {
  opacity: 0.5;
}

p:empty {
  display: none;
}

:root {
  --main-color: blue;
}
```
Try It Now
Others
- :first-of-type / :last-of-type: Selects the first or last element of a specific type within its parent.
- :nth-last-child(n): Selects the nth child from the end of its parent.
- :hover-within: Selects an element when any of its children are hovered.
Example:
```
div:first-of-type {
  border: 1px solid black;
}

li:nth-last-child(2) {
  color: orange;
}
```
Try It Now

Combining Pseudo-classes

You can combine pseudo-classes for more specific styles.

Example:

a:hover:active {
  color: red;
}

Try It Now

Comprehensive example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Pseudo-classes Example</title>
    <style>
        button:hover {
            background-color: lightblue;
        }
        input:focus {
            border: 2px solid blue;
        }
        a:active {
            color: red;
        }
        li:first-child {
            font-weight: bold;
        }
        li:nth-child(2) {
            color: green;
        }
        p:only-child {
            text-align: center;
        }
        input:checked {
            outline: 2px solid green;
        }
        input:disabled {
            background-color: lightgray;
        }
        input:required {
            border: 1px solid red;
        }
        a:link {
            color: blue;
        }
        a:visited {
            color: purple;
        }
        div:not(.active) {
            opacity: 0.5;
        }
        p:empty {
            display: none;
        }
        :root {
            --main-color: blue;
        }
        div:first-of-type {
            border: 1px solid black;
        }
        li:nth-last-child(2) {
            color: orange;
        }
        a:hover:active {
            color: red;
        }
    </style>
</head>
<body>
    <h2>Try CSS Pseudo-classes</h2>
    <button>Hover me</button>
    <input type="text" placeholder="Focus on me">
    <a href="#">Click me</a>
    <ul>
        <li>First item</li>
        <li>Second item</li>
        <li>Third item</li>
    </ul>
    <p>Only child paragraph</p>
    <input type="checkbox" checked> Checked
    <input type="text" disabled placeholder="Disabled">
    <input type="text" required placeholder="Required">
    <div class="inactive">Not active</div>
    <p></p>
</body>
</html>

Try It Now

Browser Support

Most pseudo-classes are widely supported, but modern pseudo-classes (e.g., :not(), :focus-within) may require testing in older browsers.