mc0de

pseudo classes

09
CSS Fundamentals

Pseudo-classes

Make CSS react to hovering, focusing, position, and other special element states.

CSS Interactive
button:hover {
  background: #20e778;
  color: #071a35;
}

hover me

>_ What Is a Pseudo-class?

A pseudo-class lets CSS select an element when it is in a particular state or condition — such as when someone hovers over it, focuses on it, or when it appears in a certain position.

Pseudo-classes are added to selectors using a colon (:).

This allows your CSS to respond to what the user is doing without changing the HTML element itself.

:hover

Hover

Applies styles while the pointer is positioned over an element.

:focus

Focus

Applies styles when an interactive element such as an input receives focus.

:first-child

First Child

Selects an element when it is the first child of its parent.

>_ The :hover Pseudo-class

:hover is commonly used for links, buttons, cards, and navigation items.

The styles activate while the user’s pointer is over the selected element.

hover.css
button:hover {
  background-color: #20e778;
  color: #071a35;
}

The button keeps its normal styles until the pointer moves over it.

>_ The :focus Pseudo-class

:focus is especially useful with interactive controls such as text inputs.

Click or keyboard-tab into the input and its focus styles can appear.

focus.css
input:focus {
  outline: 3px solid #20e778;
  background-color: #f4fff9;
}

>_ The :first-child Pseudo-class

Pseudo-classes aren’t only about mouse or keyboard interaction. Some describe an element’s position or relationship.

first-child.css
li:first-child {
  color: #087b49;
  font-weight: bold;
}

This targets the first list item when that <li> is the first child of its parent.

>_ Reading a Pseudo-class Selector

button

The normal selector identifies the element being targeted.

:

The colon introduces the pseudo-class.

hover

Describes the state or condition that must be true.

{ ... }

These CSS declarations activate while the condition matches.

>_ Pseudo-classes Can Work With Classes

Pseudo-classes can also be attached to class selectors.

classes-and-states.css
.card:hover {
  background-color: #071a35;
  color: white;
}

.email:focus {
  border-color: #009cff;
}
🖱️
Remember

:hover depends on pointer interaction, so don’t rely on hover alone for important information. Keyboard users often interact through states such as :focus.

Ready to Code?

Make the page react.

Build a button, input field, and list that respond differently depending on user interaction and element position.

⚡
mC0de Challenge

Make It Interactive

Use pseudo-classes to make different parts of the page react to interaction and position.

  • ✓ Create a button with normal CSS styling.
  • ✓ Use button:hover to change its background and text color.
  • ✓ Add an <input> field.
  • ✓ Use input:focus to make the input stand out when selected.
  • ✓ Create a list with at least three items.
  • ✓ Use li:first-child to style only the first item.
💡 Test your page: hover over the button, click or Tab into the input, and compare the first list item with the others.
>_ Challenge accepted. Build it below.
>_
mC0de Interactive Sandbox

Pseudo-classes Challenge

Live Preview
pseudo-classes.html
HTML + CSS Input EDIT
Live Result INTERACT
🖱️ Don’t just look at the preview — interact with it! Hover the button, click the input, and inspect the first list item.
✓
Lesson 09 Recap

What You’ve Learned

✓ Pseudo-classes target elements in special states or conditions.
✓ Pseudo-classes are added using a colon :.
✓ :hover responds when the pointer is over an element.
✓ :focus styles an interactive element when it receives focus.
✓ :first-child can target an element based on its position.
✓ Pseudo-classes can be combined with element and class selectors.
Your CSS can react now! 🖱️ You’ve moved from static styling to CSS that responds to users and changing element states.
🚀

Nice work!

Finished this lesson? Mark it complete to track your progress.

← Selectors HTML & CSS Home Next Lesson → Colors