Prev Next

CSS Pseudo-classes

CSS pseudo-classes are special keywords added to selectors that define the state of an element. They enable styling based on user interaction, element position, or other conditions without requiring additional classes or IDs.

Key Topics

Hover and Focus

The :hover pseudo-class applies styles when the user hovers over an element. The :focus pseudo-class applies styles when an element is focused (e.g., clicked or tabbed into).

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hover and Focus</title>
    <style>
        button:hover {
            background-color: blue;
            color: white;
        }
        input:focus {
            border-color: green;
            outline: none;
        }
    </style>
</head>
<body>
    <button>Hover Me</button>
    <br><br>
    <input type="text" placeholder="Focus on me">
</body>
</html>

Explanation: The button changes its background and text color on hover, while the input field changes its border color on focus.

nth-child

The :nth-child() pseudo-class selects elements based on their position within a parent, using a formula or keyword.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>nth-child</title>
    <style>
        li:nth-child(odd) {
            background-color: lightgray;
        }
        li:nth-child(even) {
            background-color: darkgray;
        }
    </style>
</head>
<body>
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
        <li>Item 4</li>
    </ul>
</body>
</html>

Explanation: Odd and even list items are styled differently using the :nth-child() pseudo-class.

First and Last Child

The :first-child and :last-child pseudo-classes target the first and last child elements of a parent, respectively.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>First and Last Child</title>
    <style>
        p:first-child {
            color: red;
        }
        p:last-child {
            color: blue;
        }
    </style>
</head>
<body>
    <div>
        <p>I am the first child.</p>
        <p>I am a middle child.</p>
        <p>I am the last child.</p>
    </div>
</body>
</html>

Explanation: The first paragraph in the div is styled red, while the last paragraph is styled blue.

Checked and Disabled

The :checked pseudo-class targets checked inputs, while the :disabled pseudo-class targets disabled form elements.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Checked and Disabled</title>
    <style>
        input:checked {
            outline: 2px solid green;
        }
        input:disabled {
            background-color: lightgray;
        }
    </style>
</head>
<body>
    <label>
        <input type="checkbox" checked> Checked Checkbox
    </label>
    <br>
    <input type="text" disabled placeholder="I am disabled">
</body>
</html>

Explanation: Checked inputs are outlined in green, while disabled inputs have a light gray background.

Key Takeaways

  • :hover and :focus: Target interactive states like hover and focus.
  • :nth-child: Style elements based on their position within a parent.
  • :first-child and :last-child: Target the first and last child elements.
  • :checked and :disabled: Style form elements based on their state.
Prev Next