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.

Mini Quiz

0%

CSS - QUIZ 27

1 / 5

Q1. What does a CSS pseudo-class allow you to style?

2 / 5

Q2. Which pseudo-class is used when the mouse pointer is over an element?

3 / 5

Q3. What is the main difference between :first-child and :last-child?

4 / 5

Q4. What does :nth-child() allow you to select?

5 / 5

Q5. Which pseudo-class can be used to style an input when its value does not meet the required condition?

Your score is

The average score is 0%

0%

By Wordpress Quiz plugin

Mini Project

Mini Project: Movie Seat Booking

Question:

Create a movie seat booking interface where users can select available seats, identify unavailable seats, and see different visual states when interacting with the seats.

Requirements

  • Add a movie title, show time, and a seating area with multiple seats.
  • Make available seats change appearance when the user hovers over them.
  • Allow selected seats to show a different style using their selected state.
  • Keep a few seats unavailable and style them differently.
  • Use different styles for alternate seats to make the seating layout easier to scan.
  • Add a Book Tickets button with different styles when hovered and clicked.
  • Include a small booking form with a required email field that shows different styles for valid and invalid input.
View Answer Code
<!DOCTYPE html>
<html>
<head>
  <title>Movie Seat Booking</title>

  <style>
    body {
      font-family: Arial, sans-serif;
      background-color: #111827;
      color: white;
      margin: 0;
      padding: 30px;
    }

    .booking {
      max-width: 650px;
      margin: auto;
      text-align: center;
    }

    h1 {
      margin-bottom: 5px;
    }

    .show-info {
      color: #cbd5e1;
      margin-bottom: 30px;
    }

    .screen {
      background-color: white;
      color: #111827;
      padding: 10px;
      border-radius: 5px;
      margin-bottom: 30px;
    }

    .seats {
      display: grid;
      grid-template-columns: repeat(6, 1fr);
      gap: 12px;
      max-width: 420px;
      margin: auto;
    }

    .seat input {
      display: none;
    }

    .seat label {
      display: block;
      padding: 12px 5px;
      background-color: #334155;
      border-radius: 6px;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    .seat label:hover {
      background-color: #2563eb;
    }

    .seat:nth-child(even) label {
      background-color: #475569;
    }

    .seat:nth-child(even) label:hover {
      background-color: #2563eb;
    }

    .seat input:checked + label {
      background-color: #22c55e;
      color: white;
    }

    .seat input:disabled + label {
      background-color: #64748b;
      color: #cbd5e1;
      cursor: not-allowed;
    }

    .booking-form {
      margin-top: 35px;
    }

    .booking-form input[type="email"] {
      width: 80%;
      max-width: 350px;
      padding: 12px;
      border: 2px solid #64748b;
      border-radius: 6px;
      outline: none;
      font-size: 15px;
    }

    .booking-form input[type="email"]:valid {
      border-color: #22c55e;
    }

    .booking-form input[type="email"]:invalid {
      border-color: #ef4444;
    }

    button {
      margin-top: 18px;
      padding: 12px 25px;
      border: none;
      border-radius: 6px;
      background-color: #2563eb;
      color: white;
      font-size: 16px;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    button:hover {
      background-color: #1d4ed8;
    }

    button:active {
      background-color: #1e40af;
    }
  </style>
</head>

<body>

  <div class="booking">

    <h1>Movie Night</h1>
    <p class="show-info">7:30 PM · Screen 2</p>

    <div class="screen">
      SCREEN
    </div>

    <div class="seats">

      <div class="seat">
        <input type="checkbox" id="a1">
        <label for="a1">A1</label>
      </div>

      <div class="seat">
        <input type="checkbox" id="a2">
        <label for="a2">A2</label>
      </div>

      <div class="seat">
        <input type="checkbox" id="a3" disabled>
        <label for="a3">A3</label>
      </div>

      <div class="seat">
        <input type="checkbox" id="a4">
        <label for="a4">A4</label>
      </div>

      <div class="seat">
        <input type="checkbox" id="a5">
        <label for="a5">A5</label>
      </div>

      <div class="seat">
        <input type="checkbox" id="a6" disabled>
        <label for="a6">A6</label>
      </div>

      <div class="seat">
        <input type="checkbox" id="b1">
        <label for="b1">B1</label>
      </div>

      <div class="seat">
        <input type="checkbox" id="b2">
        <label for="b2">B2</label>
      </div>

      <div class="seat">
        <input type="checkbox" id="b3">
        <label for="b3">B3</label>
      </div>

      <div class="seat">
        <input type="checkbox" id="b4">
        <label for="b4">B4</label>
      </div>

      <div class="seat">
        <input type="checkbox" id="b5" disabled>
        <label for="b5">B5</label>
      </div>

      <div class="seat">
        <input type="checkbox" id="b6">
        <label for="b6">B6</label>
      </div>

    </div>

    <div class="booking-form">

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

      <br>

      <button>Book Tickets</button>

    </div>

  </div>

</body>
</html>

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