CSS Pseudo-classes

By /

In this chapter, you will learn about CSS Pseudo-classes. Pseudo-classes in css allow you to style an element when it is in a particular state or based on its position. For example, you can change a button when a user moves the mouse over it or style an input field when someone clicks inside it. Let’s understand the important CSS Pseudo-classes step by step.

What is a CSS Pseudo-class?

A pseudo-class is a keyword added to a CSS selector to style an element in a specific state. For example:

button:hover {
  background-color: blue;
}

The :hover pseudo-class applies styles when the user moves the mouse over the button. Pseudo-classes always start with a single colon (:).

1. The :hover Pseudo-class

The :hover pseudo-class applies styles when the user moves the mouse pointer over an element. It is commonly used with:

  • Buttons
  • Links
  • Images
  • Cards

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Hover</title>

  <style>
    button {
      padding: 15px 25px;
      background-color: lightblue;
      border: none;
      font-size: 16px;
      cursor: pointer;
    }

    button:hover {
      background-color: blue;
      color: white;
    }
  </style>
</head>

<body>

  <button>Hover Over Me</button>

</body>
</html>

When you move the mouse over the button, its background color and text color change.

2. The :active Pseudo-class

The :active pseudo-class applies styles when an element is being clicked. It is commonly used with buttons and links.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Active</title>

  <style>
    button {
      padding: 15px 25px;
      background-color: lightgreen;
      border: none;
      font-size: 16px;
      cursor: pointer;
    }

    button:active {
      background-color: green;
      color: white;
    }
  </style>
</head>

<body>

  <button>Click and Hold</button>

</body>
</html>

The style applies while you are clicking the button.

3. The :focus Pseudo-class

The :focus pseudo-class applies styles when an element receives focus. It is commonly used with:

  • Input fields
  • Textareas
  • Buttons

For example, an input field receives focus when you click inside it.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Focus</title>

  <style>
    input {
      padding: 12px;
      border: 2px solid gray;
      outline: none;
    }

    input:focus {
      border-color: blue;
      background-color: lightblue;
    }
  </style>
</head>

<body>

  <input type="text" placeholder="Click here">

</body>
</html>

When you click inside the input field, the focus styles are applied.

4. The :first-child Pseudo-class

The :first-child pseudo-class selects an element that is the first child of its parent.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS First Child</title>

  <style>
    li:first-child {
      color: blue;
      font-weight: bold;
    }
  </style>
</head>

<body>

  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ul>

</body>
</html>

Only the first list item is styled.

5. The :last-child Pseudo-class

The :last-child pseudo-class selects an element that is the last child of its parent.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Last Child</title>

  <style>
    li:last-child {
      color: red;
      font-weight: bold;
    }
  </style>
</head>

<body>

  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
  </ul>

</body>
</html>

Only the last list item is styled.

6. The :nth-child() Pseudo-class

The :nth-child() pseudo-class selects elements based on their position. For example:

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

This selects the second list item.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Nth Child</title>

  <style>
    li:nth-child(2) {
      color: blue;
      font-weight: bold;
    }
  </style>
</head>

<body>

  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>Python</li>
  </ul>

</body>
</html>

You can also use values such as odd and even.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Nth Child Even</title>

  <style>
    li:nth-child(even) {
      background-color: lightblue;
    }
  </style>
</head>

<body>

  <ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
    <li>Python</li>
  </ul>

</body>
</html>

This styles every even list item.

You can also use:

  • nth-child(odd) for odd elements
  • nth-child(3) for a specific element
  • nth-child(3n) for every third element

7. The :first-of-type Pseudo-class

The :first-of-type pseudo-class selects the first element of a specific type inside its parent.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS First of Type</title>

  <style>
    p:first-of-type {
      color: blue;
      font-weight: bold;
    }
  </style>
</head>

<body>

  <div>

    <h1>CSS Pseudo-classes</h1>

    <p>This is the first paragraph.</p>

    <p>This is the second paragraph.</p>

  </div>

</body>
</html>

Only the first <p> element is selected.

8. The :last-of-type Pseudo-class

The :last-of-type pseudo-class selects the last element of a specific type.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Last of Type</title>

  <style>
    p:last-of-type {
      color: red;
      font-weight: bold;
    }
  </style>
</head>

<body>

  <div>

    <h1>CSS Pseudo-classes</h1>

    <p>This is the first paragraph.</p>

    <p>This is the last paragraph.</p>

  </div>

</body>
</html>

Only the last paragraph is selected.

9. The :not() Pseudo-class

The :not() pseudo-class selects elements that do not match a specific selector.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Not Pseudo-class</title>

  <style>
    p:not(.special) {
      color: blue;
    }
  </style>
</head>

<body>

  <p>This paragraph is blue.</p>

  <p class="special">
    This paragraph is not blue.
  </p>

  <p>This paragraph is also blue.</p>

</body>
</html>

The paragraphs without the special class are selected.

10. The :checked Pseudo-class

The :checked pseudo-class selects a checkbox or radio button when it is selected.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Checked</title>

  <style>
    input:checked {
      accent-color: green;
    }
  </style>
</head>

<body>

  <label>
    <input type="checkbox">
    I agree
  </label>

</body>
</html>

When the checkbox is selected, it uses the new color.

11. The :disabled Pseudo-class

The :disabled pseudo-class selects an element that is disabled.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Disabled</title>

  <style>
    button:disabled {
      background-color: gray;
      color: white;
      cursor: not-allowed;
    }
  </style>
</head>

<body>

  <button disabled>
    Disabled Button
  </button>

</body>
</html>

The styles apply because the button has the disabled attribute.

12. The :required Pseudo-class

The :required pseudo-class selects form elements that have the required attribute.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Required</title>

  <style>
    input:required {
      border: 2px solid red;
    }
  </style>
</head>

<body>

  <input
    type="text"
    placeholder="Enter your name"
    required
  >

</body>
</html>

The input field is styled because it is required.

13. The :valid and :invalid Pseudo-classes

The :valid pseudo-class selects an input when its value is valid. The :invalid pseudo-class selects an input when its value is not valid.

Example

<!DOCTYPE html>
<html>
<head>
  <title>CSS Valid and Invalid</title>

  <style>
    input {
      padding: 10px;
      border: 2px solid gray;
      outline: none;
    }

    input:valid {
      border-color: green;
    }

    input:invalid {
      border-color: red;
    }
  </style>
</head>

<body>

  <form>

    <input
      type="email"
      placeholder="Enter your email"
      required
    >

  </form>

</body>
</html>

Enter a valid email address to see the green border. Enter an invalid value to see the red border.

Quick Recap

  • Pseudo-classes style elements in a specific state or position.
  • :hover applies styles when the mouse is over an element.
  • :active applies styles while an element is being clicked.
  • :first-child selects the first child and :last-child selects the last child.
  • :nth-child() selects elements based on their position.
  • :not() selects elements that do not match a selector.
  • :checked styles selected checkboxes and radio buttons.
  • :valid and :invalid help style form input based on validity.

Frequently Asked Questions (FAQs)

Q1. What are CSS Pseudo-classes?

CSS Pseudo-classes are keywords added to CSS selectors to style elements based on their state, position, or user interaction.

Q2. What is the :hover pseudo-class in CSS?

The :hover pseudo-class applies CSS styles when a user moves the mouse pointer over an element such as a button, link, image, or card.

Q3. What is keyframes in CSS?

@keyframes is used in CSS Animations to define the different stages or steps of an animation.

Q4. Is this CSS Pseudo-classes tutorial suitable for beginners?

Yes. This CSS Pseudo-classes tutorial for beginners explains common pseudo-classes, user interaction states, element positions, and form states with simple examples.

Q5. How are CSS Pseudo-classes used with form elements?

CSS Pseudo-classes such as :focus, :checked, :disabled, :required, :valid, and :invalid can style form elements based on their state.

Q6. Why are Pseudo-classes used in CSS?

Pseudo-classes in CSS are used to style elements differently based on user interaction, element state, or their position within a parent element.

Written by Shubhranshu Shekhar, who has trained 20000+ students in coding.

Related Posts

Scroll to Top