CSS Type, Class, and ID Selectors: Basic Selector Guide

CSS selectors tell the browser which HTML elements should receive a style. Type, class, and ID selectors are the first selectors most developers learn because they cover the most common ways to target elements on a page.

Quick answer: A type selector targets every element with a given tag name, a class selector targets any element with a matching class attribute, and an ID selector targets the single element with a matching id attribute. In practice, use type selectors for broad element styling, class selectors for reusable styling, and ID selectors sparingly.

Difficulty: Beginner

You'll understand this better if you know: how HTML tags work, how attributes like class and id are written, and the idea that CSS rules match elements before they apply styles.

1. What Are Type, Class, and ID Selectors?

Type, class, and ID selectors are basic CSS patterns for selecting elements. They differ in how specific they are and how many elements they can match.

A type selector uses an HTML tag name such as p or h1.
A class selector uses a value from the class attribute and starts with a dot, such as .card.
An ID selector uses a value from the id attribute and starts with a hash, such as #header.
Selectors decide which elements receive the declarations inside a CSS rule.

These selectors are often the first step in learning how CSS matches HTML structure.

2. Why Type, Class, and ID Selectors Matter

Most styles on a website start with one of these selectors. They help you build readable stylesheets and avoid overly complicated targeting.

Type selectors are useful when every element of a given kind should look the same. Class selectors are useful when you want reusable styles for many elements. ID selectors are useful when one unique element needs a specific style or when a page anchor needs a unique identifier.

They also affect specificity, which determines what happens when multiple rules match the same element. Understanding that relationship helps you avoid surprise overrides.

3. Basic Syntax or Core Idea

A CSS rule has a selector and a declaration block. The selector comes first and tells CSS what to style.

Type selector

A type selector uses the element name directly. This example styles every paragraph on the page.

p {
  color: blue;
}

Here, p is the selector, and every <p> element becomes blue.

Class selector

A class selector starts with a dot and matches any element with that class value.

.highlight {
  background-color: yellow;
}

Any element with class="highlight" gets the yellow background.

ID selector

An ID selector starts with a hash and matches the element whose id value is unique on the page.

#site-header {
  border-bottom: 1px solid #ccc;
}

Only the element with id="site-header" gets that border.

4. Step-by-Step Examples

Example 1: Styling all paragraphs with a type selector

This is the simplest use case. If your page contains several paragraphs and they should share the same base styling, a type selector is the cleanest option.

p {
  line-height: 1.6;
  margin-bottom: 1rem;
}

This rule applies to every paragraph, so you do not need to repeat the same declarations on each element.

Example 2: Reusing a class on multiple elements

Classes are best when multiple different elements should share the same style. Here, both a button and a link can use the same class.

.button {
  display: inline-block;
  padding: 0.75rem 1rem;
  background: #0057ff;
  color: white;
}

You can apply class="button" to any suitable element, which makes the style reusable.

Example 3: Targeting a single unique page area with an ID selector

Use an ID selector when one element needs unique styling, such as a main page header.

#main-banner {
  padding: 2rem;
  text-align: center;
}

This rule applies to only one element because IDs are meant to be unique.

Example 4: Combining selectors in one stylesheet

Real stylesheets usually use all three selector types together. This example shows how they can coexist without conflict when used intentionally.

h1 {
  font-size: 2rem;
}

.muted {
  color: #666;
}

#page-title {
  margin-top: 0;
}

In this setup, the type selector sets a default, the class adds a reusable variation, and the ID provides a page-specific adjustment.

5. Practical Use Cases

These selectors are useful in different parts of a project:

Type selectors for base typography like paragraphs, headings, lists, and links.
Class selectors for reusable components such as cards, badges, alerts, and buttons.
ID selectors for a unique page header, a skip-link target, or a single form section.
Class selectors for state-like styles such as .is-active or .hidden.
ID selectors for in-page anchors that support navigation to a specific section.

In larger projects, class selectors usually do most of the styling work because they scale well and are easy to reuse.

6. Common Mistakes

Mistake 1: Forgetting the dot or hash

Beginners often write a class or ID name as if it were a type selector. CSS then looks for an element with that tag name instead of the class or ID.

Problem: The selector does not match the intended element, so the style appears to do nothing.

card {
  padding: 1rem;
}

Fix: Use a dot for a class selector.

.card {
  padding: 1rem;
}

The corrected version works because .card matches elements with class="card".

Mistake 2: Using an ID on multiple elements

An ID is supposed to be unique. Reusing it on more than one element can make styles harder to reason about and can break links or scripts that expect only one match.

Problem: The page may still render, but the document structure is invalid and the selector now describes more than one element, which defeats the purpose of an ID.

<div id="notice">First notice</div>
<div id="notice">Second notice</div>

Fix: Use a class when you need the same style on multiple elements.

<div class="notice">First notice</div>
<div class="notice">Second notice</div>

The corrected version is valid and keeps the styling reusable.

Mistake 3: Expecting a type selector to target a class

Some developers write a tag name in CSS but forget that the HTML uses a class instead. This is a common reason styles do not apply.

Problem: The selector matches only real elements named button, not elements that merely have a button-like class name.

button-primary {
  background-color: green;
}

Fix: Target the class name with a dot.

.button-primary {
  background-color: green;
}

This works because the selector now matches the class value in the HTML.

7. Best Practices

Use type selectors for broad defaults

Type selectors are great for baseline styles that should apply everywhere, such as body text, headings, or list spacing.

body {
  font-family: Arial, sans-serif;
}

This keeps your stylesheet consistent without repeating the same declaration on every element.

Prefer classes for reusable component styling

Classes are easier to scale because the same style can be used in many places without duplication.

.alert {
  border: 1px solid #f0c36d;
  background: #fff8e5;
}

This approach is flexible because you can add the same class to many elements.

Reserve IDs for unique page anchors or special cases

ID selectors have higher specificity than class selectors, so they can make overrides harder. Use them only when uniqueness is actually needed.

#contact {
  scroll-margin-top: 2rem;
}

This is a good fit when one section needs a unique target or page-specific adjustment.

8. Limitations and Edge Cases

An ID should be unique in the document, so it is not a good choice for styles you want to reuse.
ID selectors are more specific than class selectors, which can make later overrides harder.
Type selectors can affect many elements at once, so a broad rule may style more than you intended.
Case sensitivity can matter in some contexts, especially in HTML attribute values and when working with XML-based content.
A class name in CSS must match the HTML exactly, including spelling and hyphenation.
Selector collisions can happen in large projects if class names are too generic, such as .title or .active.

If a style is “not working,” the most common causes are a spelling mismatch, missing dot or hash, or another rule with higher specificity overriding it.

9. Practical Mini Project

Here is a small example that uses all three selector types in a realistic page section. It styles a page heading, a reusable card, and a unique featured area.

<section id="hero">
  <h1 class="title">Welcome</h1>
  <p class="lead">Start building your page here.</p>
  <a class="button" href="/get-started">Get Started</a>
</section>

<style>
section {
  padding: 2rem;
}

.title {
  margin: 0;
  font-size: 2rem;
}

.button {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: #111;
  color: white;
  text-decoration: none;
}

#hero {
  background: #f5f7ff;
}
</style>

The section type selector gives all sections shared spacing, the .title and .button classes are reusable, and the #hero ID adds a unique background to one area.

10. Key Points

Type selectors target HTML tag names like p, h1, and section.
Class selectors target values in the class attribute and can be reused on many elements.
ID selectors target one unique element with a matching id value.
ID selectors are more specific than class selectors, which are more specific than type selectors.
Reusable styles usually belong in classes, while IDs are best kept for unique page features.

11. Practice Exercise

Build a small style system for a simple article layout using one type selector, one class selector, and one ID selector.

Style all h2 elements with a common bottom margin.
Create a .note class that highlights important text.
Use an ID selector for one unique callout box named #summary.

Expected output: The headings should share the same spacing, note boxes should have a subtle background, and the summary box should stand out from the rest.

Hint: Remember that the class selector needs a dot and the ID selector needs a hash.

Solution:

h2 {
  margin-bottom: 0.5rem;
}

.note {
  padding: 1rem;
  background: #f8f8f8;
  border-left: 4px solid #999;
}

#summary {
  padding: 1rem;
  background: #eef4ff;
  border: 1px solid #b8ccff;
}

This solution works because each selector type is used for the job it is best suited to: broad styling, reusable styling, and unique styling.

12. Final Summary

Type, class, and ID selectors are the foundation of CSS targeting. Type selectors style elements by tag name, class selectors style reusable groups of elements, and ID selectors style one unique element.

As you write more CSS, you will usually rely on classes for most component styles, use type selectors for defaults, and reserve IDs for special cases. That approach keeps styles flexible, easier to override, and easier to maintain.

Next, practice combining these selectors in one layout and watch how specificity affects the final result.