CSS Pseudo-classes

:hover, :focus, :first-child, :nth-child and more.

✍️ 3 exercises + code challenge in this lesson

❮ Previous Next ❯

A pseudo-class styles an element in a special state. It is written with one colon.

:hover, :focus, :active: interaction states.
:first-child, :last-child, :nth-child(2n): position among siblings.
:checked, :disabled, :required, :invalid: form states.
:not(.x): elements that do not match a selector.

Key Takeaways: CSS Pseudo-classes

Mastering CSS Pseudo-classes helps you write clean and reliable CSS code. Follow standard conventions, test edge cases, and keep logic simple. Try running the code example below and complete the exercises to build confidence.

CSS Pseudo-classes Code Example

CSS

<style>
  li:first-child   { color: #14B8A6; font-weight: bold; }
  li:nth-child(even) { background: #F1F5F9; }
  li:not(:first-child):hover { background: #DBEAFE; }
  input:focus      { border-color: #2563EB; outline: none; box-shadow: 0 0 0 3px #BFDBFE; }
  input:invalid    { border-color: #E34F26; }
  input { border: 2px solid #CBD5E1; padding: 6px; border-radius: 6px; }
</style>

<ul><li>First</li><li>Second</li><li>Third</li><li>Fourth</li></ul>
<input type="email" placeholder="Type an invalid email">

Free sign-in required · Google login available

CSS Pseudo-classes Practice Exercises

Check what you learned in “CSS Pseudo-classes”.

/ 3 solved

Fill in the blank

Style the first item in a list.

li: {
  font-weight: bold;
}

✓ Correct! Not quite. Try again.

Multiple choice

Which pseudo-class matches an input that has keyboard focus?

:focus :active :hover :selected

✓ Correct! Not quite. Try again.

Code challenge

Make the last list item green using a pseudo-class.

Write the code in the live editor. Your answer is checked automatically.

Free sign-in required · Google login available

to save your exercise progress.

Finished this lesson?

Mark it complete to track your progress.

Stuck on something?

Ask the community in the CodesInTech forum.

Need a developer?

Learning on your own is great — and when you need professional help, our team builds custom software, websites and mobile apps for clients worldwide.

Explore Our Services

CSS Pseudo-classes

💡 Key Takeaways: CSS Pseudo-classes

CSS Pseudo-classes Code Example

CSS Pseudo-classes Practice Exercises

Key Takeaways: CSS Pseudo-classes