CSS .class Selector

What You’ll Learn

The .class selector is one of the most important tools in CSS. It lets you reuse styles across many elements by assigning the same class name in HTML.

Introduction

The .class selector in CSS targets HTML elements that have a specific class attribute value. Unlike styling a single element with an ID, classes are designed to be reused on many elements.

This makes classes essential for consistent design systems — buttons, cards, alerts, and layout utilities all rely on class-based styling.

Definition and Usage

In CSS, write a dot (.) followed by the class name with no space: .title or .btn-primary. In HTML, add class="title" to any element that should receive those styles.

📝 Syntax

The signature of the class selector is:

.class {
  /* CSS properties */
}

Basic Example

.title {
  color: #2563eb;
  font-size: 1.75rem;
}

.content {
  line-height: 1.6;
  color: #334155;
}

.button {
  background: #16a34a;
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 6px;
}

Syntax Rules

• Always start with a dot: .my-class (not my-class alone).
• Class names are case-sensitive: .Card ≠ .card.
• Hyphens are common: .btn-primary, .nav-link.
• Multiple classes in HTML are space-separated: class="btn btn-primary".
• Combine with element types: div.card for more specificity.

Related Selectors

• #id — targets a single unique element by ID
• element — type selector for all elements of that tag
• .class1.class2 — element must have both classes
• .class1 .class2 — descendant with class inside ancestor with class

When to Use .class

Class selectors are the default choice for most styling tasks:

• Reusable components — Buttons, cards, badges, and alerts shared across pages.
• Layout utilities — Classes like .container, .flex, or .text-center.
• State modifiers — Add .active, .disabled, or .featured alongside a base class.
• Typography — Shared heading and body text styles via .lead or .caption.
• Framework patterns — Bootstrap, Tailwind, and most CSS frameworks are class-driven.

Examples Gallery

Practice the .class selector with basic styling, multiple classes, type combinations, and chained selectors.

.title {
  color: #2563eb;
  font-size: 1.75rem;
}

.content {
  line-height: 1.6;
  color: #334155;
}

.button {
  background: #16a34a;
  color: #fff;
  padding: 0.5rem 1rem;
  border-radius: 6px;
}

.btn {
  padding: 0.5rem 1rem;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #f8fafc;
}

.btn-primary {
  background: #2563eb;
  border-color: #2563eb;
  color: #fff;
}

.btn-large {
  padding: 0.65rem 1.25rem;
  font-size: 1.05rem;
}

div.card {
  background: #eff6ff;
  border: 1px solid #93c5fd;
  color: #1e40af;
  padding: 0.75rem 1rem;
  border-radius: 8px;
}

span.card {
  background: #fef3c7;
  border: 1px solid #fcd34d;
  color: #92400e;
  padding: 0.35rem 0.65rem;
  border-radius: 999px;
}

.card {
  padding: 1rem 1.25rem;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
}

.card.featured {
  border-color: #f59e0b;
  background: #fffbeb;
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.15);
}

⚠️ Common Pitfalls

• Vague names — Avoid .red or .big; use descriptive names like .alert-error or .text-lg.
• Case sensitivity — .Button and .button are different classes; keep naming consistent.
• Missing dot in CSS — Write .title in CSS, not title (that would be an element selector).
• Space vs no space — .a.b means both classes on one element; .a .b means .b nested inside .a.
• Overusing !important — Fix specificity with better selectors instead of forcing styles with !important.

♿ Accessibility

• Classes are not semantics — A class="button" on a <div> is not a real button; use <button> for actions.
• Do not rely on class alone — Screen readers ignore CSS classes; use proper HTML elements and ARIA when needed.
• Visible focus — Style :focus on interactive elements, not just hover classes.
• Color contrast — Ensure text classes like .text-muted still meet contrast guidelines.

💡 Best Practices