CSS Pseudo-Classes Tutorial

Introduction

CSS selectors can target elements by tag name, class, ID, attribute, and position in the HTML structure.

Pseudo-classes add another useful option.

A pseudo-class lets you style an element when it is in a particular state or when it has a particular relationship in the document.

For example, a link can change when a user hovers over it:

1a:hover {2  text-decoration: underline;3}

A form field can change when it receives focus:

1input:focus {2  outline: 2px solid #0055cc;3}

A list item can be styled if it is the first child:

1li:first-child {2  font-weight: bold;3}

A checkbox can affect styling when it is checked:

1input:checked {2  outline: 2px solid green;3}

Pseudo-classes are useful because they let CSS respond to interaction, form state, and document structure without needing extra classes for every situation.

What Is a Pseudo-Class?

A pseudo-class is a keyword added to a selector.

It starts with a colon:

1:

For example:

1button:hover {2  background-color: #eeeeee;3}

The pseudo-class is:

1:hover

This selector means:

1select a button when the user is hovering over it

Pseudo-classes do not usually appear in the HTML.

You do not write:

1<button class=”:hover”>Save</button>

The browser applies pseudo-classes when the matching state or condition is true.

Why Pseudo-Classes Are Useful

Pseudo-classes help you style elements based on conditions.

They can respond to:

1mouse interaction2keyboard focus3form control state4link history5element position6document structure7validation state8enabled or disabled state

For example, CSS can style a button when a pointer is over it:

1button:hover {2  background-color: #f0f0f0;3}

CSS can style an input when a user is typing in it:

1input:focus {2  border-color: #0055cc;3}

CSS can style the first list item:

1li:first-child {2  font-weight: bold;3}

These are all conditions that CSS can detect through pseudo-classes.

Pseudo-Class Syntax

The basic syntax is:

1selector:pseudo-class {2  property: value;3}

For example:

1a:hover {2  color: darkblue;3}

The selector is:

1a

The pseudo-class is:

1:hover

The declaration is:

1color: darkblue;

Together, this means:

1when a link is hovered, make its text dark blue

Pseudo-Classes Are Different from Classes

A normal class is written in HTML:

1<p class=”intro”>Welcome to the page.</p>

CSS selects it with a dot:

1.intro {2  font-size: 1.2rem;3}

A pseudo-class is not written as an HTML class.

It is written in CSS with a colon:

1a:hover {2  text-decoration: underline;3}

The browser decides when :hover applies.

A class describes something you add to the HTML.

A pseudo-class describes a state or condition the browser can detect.

The :hover Pseudo-Class

The :hover pseudo-class applies when the user points at an element with a mouse, trackpad, stylus, or similar pointer.

Example:

1a:hover {2  text-decoration: underline;3}

This underlines a link when it is hovered.

Another example:

1button:hover {2  background-color: #eeeeee;3}

This changes a button background when it is hovered.

Hover styles can make a page feel more interactive.

However, do not rely on hover alone because touchscreens and keyboard users may not experience hover in the same way.

:hover Example

HTML:

1<a href=”about.html”>About us</a>2 3<button type=”button”>Save</button>

CSS:

1a:hover {2  color: darkblue;3}4 5button:hover {6  background-color: #f5f5f5;7}

When the user points at the link, the link colour changes.

When the user points at the button, the button background changes.

The HTML does not need to change.

The browser applies the :hover pseudo-class when the hover state is active.

The :focus Pseudo-Class

The :focus pseudo-class applies when an element receives focus.

Focus often happens when a user clicks into a form field or uses the keyboard to tab to a link, button, or input.

Example:

1input:focus {2  outline: 2px solid #0055cc;3}

This styles an input when it has focus.

Another example:

1a:focus {2  outline: 2px solid #0055cc;3}

This styles a link when it receives focus.

Focus styles are important for accessibility.

They help keyboard users see where they are on the page.

:focus Example

HTML:

1<label for=”email”>Email address</label>2<input type=”email” id=”email” name=”email”>3 4<button type=”submit”>Subscribe</button>

CSS:

1input:focus,2button:focus {3  outline: 2px solid #0055cc;4  outline-offset: 2px;5}

When the input or button receives focus, the outline appears.

This is useful for users who navigate with the keyboard.

Do not remove focus outlines unless you replace them with a clear alternative.

:focus-visible

The :focus-visible pseudo-class is similar to :focus, but it is designed to show focus styles when they are most useful, such as during keyboard navigation.

Example:

1a:focus-visible,2button:focus-visible,3input:focus-visible {4  outline: 2px solid #0055cc;5  outline-offset: 2px;6}

This can avoid showing a focus outline in some mouse-click situations while still preserving keyboard focus visibility.

For many projects, :focus-visible is a good choice for visible focus indicators.

If you use it, test keyboard navigation to make sure focus is still clear.

:hover and :focus Together

Interactive elements should often have both hover and focus styles.

Less complete:

1a:hover {2  text-decoration: underline;3}

Better:

1a:hover,2a:focus-visible {3  text-decoration: underline;4}

This gives a similar visual cue to mouse users and keyboard users.

Another example:

1button:hover,2button:focus-visible {3  background-color: #eeeeee;4}

Do not design only for pointer interaction.

Keyboard focus needs clear styling too.

The :active Pseudo-Class

The :active pseudo-class applies while an element is being activated.

For example, when a user presses a mouse button down on a link or button.

Example:

1button:active {2  transform: translateY(1px);3}

This can make a button feel pressed.

Another example:

1a:active {2  color: darkred;3}

The active state is usually brief.

It is useful for small interaction feedback.

Link Pseudo-Classes

Links have special pseudo-classes.

Common link states include:

1a:link

1a:visited

1a:hover

1a:focus

1a:active

:link applies to links that have not been visited.

:visited applies to links the browser considers visited.

:hover applies when the link is hovered.

:focus applies when the link has focus.

:active applies while the link is being activated.

Styling Link States

Example:

1a:link {2  color: #0055cc;3}4 5a:visited {6  color: #663399;7}8 9a:hover,10a:focus-visible {11  text-decoration: underline;12}13 14a:active {15  color: #cc0000;16}

This gives links different visual states.

Modern browsers restrict which properties can be applied to :visited for privacy reasons.

For basic styling, changing visited link colour is common.

The main point is that links can have several states, not only hover.

The :first-child Pseudo-Class

The :first-child pseudo-class selects an element if it is the first child of its parent.

Example:

1li:first-child {2  font-weight: bold;3}

HTML:

1<ul>2  <li>First item</li>3  <li>Second item</li>4  <li>Third item</li>5</ul>

This selects the first <li> because it is the first child of the <ul>.

It does not select the second or third item.

:first-child Depends on the Parent

The element must be the first child of its parent.

Example:

1<section>2  <h2>Topics</h2>3  <p>First paragraph.</p>4  <p>Second paragraph.</p>5</section>

CSS:

1p:first-child {2  font-weight: bold;3}

This does not select the first paragraph because the first child of the section is the <h2>, not the <p>.

If you want the first paragraph of its type, you may need another pseudo-class such as :first-of-type.

The :last-child Pseudo-Class

The :last-child pseudo-class selects an element if it is the last child of its parent.

Example:

1li:last-child {2  margin-bottom: 0;3}

HTML:

1<ul>2  <li>First item</li>3  <li>Second item</li>4  <li>Third item</li>5</ul>

This selects the third <li> because it is the last child of the <ul>.

This is useful when removing extra spacing from the last item in a list or component.

The :first-of-type Pseudo-Class

The :first-of-type pseudo-class selects the first element of a specific type among its siblings.

Example:

1p:first-of-type {2  font-weight: bold;3}

HTML:

1<section>2  <h2>Topics</h2>3  <p>First paragraph.</p>4  <p>Second paragraph.</p>5</section>

This selects the first paragraph.

Unlike p:first-child, it does not require the paragraph to be the first child overall.

It only needs to be the first <p> among its siblings.

The :nth-child() Pseudo-Class

The :nth-child() pseudo-class selects elements based on their position among siblings.

Example:

1li:nth-child(2) {2  font-weight: bold;3}

This selects the second list item.

HTML:

1<ul>2  <li>First item</li>3  <li>Second item</li>4  <li>Third item</li>5</ul>

You can also use keywords:

1li:nth-child(odd) {2  background-color: #f5f5f5;3}

1li:nth-child(even) {2  background-color: #ffffff;3}

This is useful for alternating table rows or list items.

The :checked Pseudo-Class

The :checked pseudo-class applies to checkboxes, radio buttons, and some options when they are selected.

Example:

1input:checked {2  outline: 2px solid green;3}

HTML:

1<label>2  <input type=”checkbox” name=”updates”>3  Send me updates4</label>

When the checkbox is checked, the input matches :checked.

This is useful for styling selected form controls.

Styling Checked Checkboxes

You can combine :checked with sibling selectors.

HTML:

1<label class=”choice”>2  <input type=”checkbox” name=”topic” value=”css”>3  <span>CSS tutorials</span>4</label>

CSS:

1.choice input:checked + span {2  font-weight: bold;3}

This means:

1inside .choice, when the input is checked, style the span immediately after it

The text becomes bold when the checkbox is checked.

This works because the <span> comes immediately after the input.

Styling Checked Radio Buttons

Radio buttons can also use :checked.

HTML:

1<label class=”option”>2  <input type=”radio” name=”level” value=”basic”>3  <span>Basic</span>4</label>5 6<label class=”option”>7  <input type=”radio” name=”level” value=”advanced”>8  <span>Advanced</span>9</label>

CSS:

1.option input:checked + span {2  color: navy;3  font-weight: bold;4}

When a radio button is selected, the label text after it is styled.

This gives users a clearer visual cue about the selected option.

The :disabled Pseudo-Class

The :disabled pseudo-class selects disabled form controls.

HTML:

1<input type=”text” disabled>2<button type=”submit” disabled>Submit</button>

CSS:

1input:disabled,2button:disabled {3  opacity: 0.6;4  cursor: not-allowed;5}

This styles disabled controls differently.

Disabled controls cannot usually be edited, focused, or submitted.

They should look unavailable but still readable.

The :enabled Pseudo-Class

The :enabled pseudo-class selects form controls that are enabled.

Example:

1button:enabled {2  cursor: pointer;3}

This applies only to buttons that can be used.

You can combine enabled and disabled styles:

1button:enabled {2  cursor: pointer;3}4 5button:disabled {6  opacity: 0.6;7  cursor: not-allowed;8}

This helps users understand which controls are available.

The :required Pseudo-Class

The :required pseudo-class selects form controls with the required attribute.

HTML:

1<input type=”email” required>

CSS:

1input:required {2  border-left: 4px solid navy;3}

This selects required inputs.

There is also :optional, which selects form controls that are not required.

These pseudo-classes can help style forms based on validation requirements.

The :valid and :invalid Pseudo-Classes

Form controls can also match validation states.

Example:

1input:valid {2  border-color: green;3}4 5input:invalid {6  border-color: red;7}

HTML:

1<input type=”email” required>

If the input contains a valid email address, it may match :valid.

If it is empty or contains invalid email text, it may match :invalid.

Be careful with :invalid, because required empty fields may appear invalid before the user has interacted with them.

That can feel harsh if the form shows errors too early.

A Practical Form Example

HTML:

1<form class=”signup-form”>2  <label for=”email”>Email address</label>3  <input type=”email” id=”email” name=”email” required>4 5  <label class=”choice”>6    <input type=”checkbox” name=”updates”>7    <span>Send me updates</span>8  </label>9 10  <button type=”submit”>Subscribe</button>11</form>

CSS:

1.signup-form input:focus {2  outline: 2px solid #0055cc;3  outline-offset: 2px;4}5 6.signup-form input:required {7  border-left: 4px solid navy;8}9 10.choice input:checked + span {11  font-weight: bold;12}13 14.signup-form button:hover,15.signup-form button:focus-visible {16  background-color: #eeeeee;17}

This uses pseudo-classes for focus, required fields, checked checkboxes, and button interaction.

A Practical Navigation Example

HTML:

1<nav class=”site-nav”>2  <a href=”index.html”>Home</a>3  <a href=”lessons.html”>Lessons</a>4  <a href=”contact.html”>Contact</a>5</nav>

CSS:

1.site-nav a {2  text-decoration: none;3}4 5.site-nav a:hover,6.site-nav a:focus-visible {7  text-decoration: underline;8}9 10.site-nav a:active {11  color: darkred;12}

This styles navigation links in different interaction states.

The hover and focus-visible states help users see which link they are interacting with.

A Practical List Example

HTML:

1<ul class=”lesson-list”>2  <li>Selectors</li>3  <li>Properties</li>4  <li>Values</li>5  <li>The cascade</li>6</ul>

CSS:

1.lesson-list li:first-child {2  font-weight: bold;3}4 5.lesson-list li:last-child {6  margin-bottom: 0;7}8 9.lesson-list li:nth-child(odd) {10  background-color: #f5f5f5;11}

This styles the first item, removes spacing from the last item, and gives odd items a background.

Pseudo-classes are useful for list styling because they can target position without extra classes.

Combining Pseudo-Classes

You can combine pseudo-classes.

Example:

1button:hover:enabled {2  background-color: #eeeeee;3}

This selects buttons that are both hovered and enabled.

It does not apply to disabled buttons.

Another example:

1input:required:focus {2  border-color: navy;3}

This selects a required input while it has focus.

Combining pseudo-classes can be useful, but keep selectors readable.

Combining Pseudo-Classes with Classes

Pseudo-classes are often combined with class selectors.

Example:

1.button:hover {2  background-color: #eeeeee;3}

This targets elements with class="button" when they are hovered.

Another example:

1.card:first-child {2  border-top: 4px solid navy;3}

This selects a .card element if it is the first child of its parent.

Classes define the component.

Pseudo-classes define the state or condition.

Pseudo-Classes and Specificity

A pseudo-class has similar specificity to a class selector.

For example:

1button:hover {2  background-color: #eeeeee;3}

has more specificity than:

1button {2  background-color: white;3}

If both rules apply during hover, the hover rule can override the normal button rule.

This is one reason pseudo-class styles often work well as state styles.

Pseudo-Classes Are Not Pseudo-Elements

Pseudo-classes and pseudo-elements are different.

A pseudo-class uses one colon and selects a state or condition:

1a:hover {2  color: blue;3}

A pseudo-element usually uses two colons and styles part of an element:

1p::first-line {2  font-weight: bold;3}

This article focuses on pseudo-classes such as :hover, :focus, :first-child, and :checked.

Pseudo-elements are a separate topic.

A Complete Example

HTML:

1<!DOCTYPE html>2<html lang=”en”>3<head>4  <meta charset=”UTF-8″>5  <title>CSS Pseudo-Classes Example</title>6  <link rel=”stylesheet” href=”styles.css”>7</head>8<body>9 10  <main class=”container”>11    <h1>CSS Pseudo-Classes</h1>12 13    <nav class=”site-nav”>14      <a href=”index.html”>Home</a>15      <a href=”lessons.html”>Lessons</a>16      <a href=”contact.html”>Contact</a>17    </nav>18 19    <section class=”card”>20      <h2>Lesson Topics</h2>21 22      <ul class=”lesson-list”>23        <li>Hover states</li>24        <li>Focus states</li>25        <li>First child selectors</li>26        <li>Checked form controls</li>27      </ul>28    </section>29 30    <form class=”signup-form”>31      <label for=”email”>Email address</label>32      <input type=”email” id=”email” name=”email” required>33 34      <label class=”choice”>35        <input type=”checkbox” name=”updates”>36        <span>Send me CSS updates</span>37      </label>38 39      <button type=”submit”>Subscribe</button>40    </form>41  </main>42 43</body>44</html>

CSS:

1body {2  font-family: Arial, sans-serif;3  line-height: 1.6;4}5 6.container {7  width: 90%;8  max-width: 900px;9  margin: 0 auto;10}11 12.site-nav a {13  text-decoration: none;14}15 16.site-nav a:hover,17.site-nav a:focus-visible {18  text-decoration: underline;19}20 21.card {22  padding: 24px;23  border: 1px solid #dddddd;24}25 26.lesson-list li:first-child {27  font-weight: bold;28}29 30.lesson-list li:nth-child(odd) {31  background-color: #f5f5f5;32}33 34.signup-form input:focus-visible,35.signup-form button:focus-visible {36  outline: 2px solid #0055cc;37  outline-offset: 2px;38}39 40.signup-form input:required {41  border-left: 4px solid navy;42}43 44.choice input:checked + span {45  font-weight: bold;46}47 48.signup-form button:hover,49.signup-form button:focus-visible {50  background-color: #eeeeee;51}

This example uses pseudo-classes for links, lists, forms, checkboxes, and buttons.

How the Complete Example Works

This rule styles navigation links when hovered or focused:

1.site-nav a:hover,2.site-nav a:focus-visible {3  text-decoration: underline;4}

This rule styles the first list item:

1.lesson-list li:first-child {2  font-weight: bold;3}

This rule styles odd list items:

1.lesson-list li:nth-child(odd) {2  background-color: #f5f5f5;3}

This rule styles focused form controls:

1.signup-form input:focus-visible,2.signup-form button:focus-visible {3  outline: 2px solid #0055cc;4}

This rule styles required inputs:

1.signup-form input:required {2  border-left: 4px solid navy;3}

This rule styles checkbox text when the checkbox is checked:

1.choice input:checked + span {2  font-weight: bold;3}

Each pseudo-class applies only when its condition is true.

Common Mistake: Removing Focus Styles

Avoid this:

1button:focus {2  outline: none;3}

This can make keyboard navigation difficult.

Better:

1button:focus-visible {2  outline: 2px solid #0055cc;3  outline-offset: 2px;4}

Focus styles help users know which element is active.

Do not remove them unless you provide a clear replacement.

Common Mistake: Using Hover Without Focus

Less complete:

1a:hover {2  text-decoration: underline;3}

Better:

1a:hover,2a:focus-visible {3  text-decoration: underline;4}

Mouse users get hover feedback.

Keyboard users get focus feedback.

Interactive states should consider more than one input method.

Common Mistake: Confusing :first-child and :first-of-type

HTML:

1<section>2  <h2>Heading</h2>3  <p>First paragraph.</p>4</section>

This does not match the paragraph:

1p:first-child {2  font-weight: bold;3}

because the paragraph is not the first child of the section.

This does match:

1p:first-of-type {2  font-weight: bold;3}

because it is the first paragraph of its type.

Use the pseudo-class that matches the structure you actually need.

Common Mistake: Expecting :checked to Style Any Nearby Element

HTML:

1<label class=”choice”>2  <input type=”checkbox”>3  <span>Subscribe</span>4</label>

This works:

1.choice input:checked + span {2  font-weight: bold;3}

because the <span> immediately follows the input.

If the HTML changes to:

1<label class=”choice”>2  <span>Subscribe</span>3  <input type=”checkbox”>4</label>

the same selector no longer works because the span does not come after the input.

The + selector depends on element order.

Common Mistake: Styling Invalid Fields Too Early

This can show an error style immediately:

1input:invalid {2  border-color: red;3}

If the input is required and empty, it may appear invalid before the user has typed anything.

That can feel aggressive.

A more careful approach is to combine validation styling with other states or JavaScript-enhanced classes later.

For simple CSS-only examples, use invalid styling carefully and test how it feels in the form.

Common Mistake: Thinking Pseudo-Classes Are Written in HTML

Incorrect:

1<a class=”:hover” href=”about.html”>About</a>

Correct CSS:

1a:hover {2  text-decoration: underline;3}

Pseudo-classes belong in CSS selectors.

They are not class names written in the HTML.

Best Practices

Use :hover for pointer interaction.

Pair hover styles with :focus-visible where appropriate.

Keep focus indicators visible.

Use :first-child, :last-child, and :nth-child() for structural styling.

Use :first-of-type when you need the first element of a specific type.

Use :checked for selected checkboxes and radio buttons.

Use :disabled and :enabled to style unavailable and available controls.

Use :required, :valid, and :invalid carefully in forms.

Remember that pseudo-classes start with a colon.

Remember that pseudo-classes describe a state or condition, not an HTML class.

Use browser developer tools to force states such as hover and focus when testing.

Summary

CSS pseudo-classes style elements when a state or condition is true.

They start with a colon:

1selector:pseudo-class {2  property: value;3}

Examples include:

1a:hover {2  text-decoration: underline;3}

1input:focus {2  outline: 2px solid #0055cc;3}

1li:first-child {2  font-weight: bold;3}

1input:checked {2  outline: 2px solid green;3}

Pseudo-classes can respond to interaction, focus, form state, validation, and element position.

The main idea is simple:

1Pseudo-classes let CSS style elements based on states and conditions.

Used well, they make pages more interactive, more readable, and easier to use.