CSS Pseudo-classes

What Are Pseudo-classes?

Pseudo-classes let you apply styles based on an element's state or position without extra classes or JavaScript.

a:hover {
  color: red;
}

Common Pseudo-classes

• :hover — when a user hovers over an element
• :active — while an element is being clicked
• :focus — when an element is in focus (like an input)
• :nth-child(n) — targets specific child elements by index
• :first-child — targets the first child
• :last-child — targets the last child

Visual Examples

:hover:

:active:

:focus:

:nth-child:

• Item 1
• Item 2
• Item 3

Best Practices

• Use pseudo-classes to enhance UX with feedback
• Pair them with descriptive class names
• Keep selectors simple and efficient

Practice Prompt

Style a button so it changes background color on hover and displays a border on focus.

// CSS FILE
button {
  background-color: #4CAF50; /* default green */
  color: white;
  padding: 10px 20px;
  border: none; /* remove default border */
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s ease, border 0.3s ease;
}

button:hover {
  background-color: #45a049; /* darker green on hover */
}

button:focus {
  outline: none; /* remove default focus outline */
  border: 2px solid #333; /* add custom border on focus */
}

<button>Click Me</button>

You can copy and paste this code in your IDE to run!

Need Help?

Ask the AI if you need help understanding or want to dive deeper in any topic