Loading...

CSS Pseudo-classes

Selectors can already match tags, classes, ids, tree relationships, and attributes. Pseudo-classes answer a different question: style an element because of its state or its place among siblings — the mouse is over it, it has keyboard focus, the link was visited, or it is the first child — without inventing extra classes in the HTML.

What are CSS pseudo-classes?

A pseudo-class is a keyword that starts with a single colon (:) and attaches to a selector. It does not appear in your markup as a real class="…". The browser applies it when a condition is true: interaction, link history, or position in the tree.

Everyday pseudo-classes at a glance

Master these first. Many other names exist, but these cover most beginner UI work.

📊 Everyday CSS pseudo-classes

Pseudo-class Matches when Example
:hover Pointer is over the element a:hover
:focus Element has keyboard or click focus input:focus
:visited Link was already visited (with privacy limits) a:visited
:first-child Element is the first child of its parent li:first-child
:nth-child(n) Element is the nth child (or odd/even patterns) tr:nth-child(odd)
:disabled Form control is disabled button:disabled

Hover — :hover

:hover styles an element while the pointer rests on it. Buttons and links feel alive when hover feedback is clear — and restrained.

Hover — button feedback

css
CSS Code 
button:hover {
background-color: #0f766e;
color: #fff;
}

Hover habits

Keep hover styles a gentle change, not a layout jump. Touch devices may not “hover” the same way, so never put essential information only in a hover state.

Focus — :focus

:focus styles the element that currently receives keyboard or programmatic focus. It is essential for accessibility: people who tab through a form must see where they are.

Focus — visible input ring

css
CSS Code 
input:focus {
outline: 2px solid #0f766e;
outline-offset: 2px;
}

Focus vs hover

Hover is for pointing. Focus is for “this control is active now,” including keyboard users. Style both. Do not remove outlines without replacing them with an equally clear focus indicator.

Visited links — :visited

:visited matches links the browser believes the user has already opened. You can change a limited set of properties (often color-related). Browsers restrict :visited styling for privacy, so do not rely on dramatic layout changes.

Visited — muted link color

css
CSS Code 
a:visited {
color: #6b21a8;
}

Link order tip

When you style several link states together, a common safe order is link → visited → hover → focus (sometimes remembered as LVHA). Later rules in the cascade can override earlier ones for the same specificity — order keeps hover/focus visible on visited links.

First child — :first-child

:first-child matches an element that is the first child of its parent — not merely “the first li on the page,” but the first among that parent’s children.

First child — highlight the lead item

css
CSS Code 
li:first-child {
font-weight: 700;
}

Related: :nth-child

:nth-child(odd), :nth-child(even), or :nth-child(3) pick children by position or pattern. Learn :first-child first; reach for :nth-child when you need stripes or “every third item.”

Practical habits

  • Use one colon for pseudo-classes (:hover); two colons (::) are for pseudo-elements (next session)
  • Always pair interactive hover styles with a clear :focus style
  • Prefer subtle visited colors; do not expect full styling freedom on :visited
  • Combine with other selectors when needed: nav a:hover, .card:focus-within (advanced later)
  • Test with the keyboard (Tab), not only the mouse

Try it yourself

  1. Build a short page with a <button>, an <input>, a few links, and a <ul> with three <li> items.
  2. Add button:hover { background-color: #0f766e; color: #fff; } and move the mouse over the button.
  3. Add input:focus { outline: 2px solid #0f766e; } and Tab into the field — confirm the ring appears.
  4. Add a:visited { color: #6b21a8; }, visit a link, return, and notice the color change (privacy limits may constrain other properties).
  5. Add li:first-child { font-weight: 700; } and confirm only the first list item is bold.

Common mistakes

  • Writing ::hover or ::focus — those double colons are for pseudo-elements, not these states
  • Styling :hover and removing focus outlines with no replacement — keyboard users lose their place
  • Expecting :visited to change padding, display, or content freely — browsers limit it for privacy
  • Thinking p:first-child means “the first paragraph anywhere” — it means a p that is the first child of its parent
  • Putting critical instructions only inside :hover so touch users never see them

Summary

  • Pseudo-classes select by state or position with a single colon
  • :hover and :focus give interactive feedback; keep both usable
  • :visited styles opened links within browser privacy limits
  • :first-child targets the first child of a parent; :nth-child extends the idea
  • One colon = pseudo-class; two colons = pseudo-element (coming next)
  • Practice with mouse, keyboard Tab, and a short list

🧠 Test Your Knowledge

Ready to Start

Test Your Knowledge

Challenge yourself with this interactive quiz and see how well you understand the topic

❓
7
Questions
🎯
70%
To Pass
♾️
∞
Time
🔄
∞
Attempts

📝 Instructions

  • Read each question carefully
  • Select the best answer for each question
  • You can retake the quiz as many times as you want
  • Your progress will be shown at the top
Topic 1 of 1
Css Tutorial