What You’ll Learn

The element.class selector combines a tag name with a class name for precise targeting. Use it when the same class appears on different HTML elements but needs different styles.

Introduction

The CSS element.class selector lets you apply styles to specific HTML elements that possess a particular class attribute. It combines a type selector (the element name) with a class selector for greater precision than .class alone.

This pattern is a powerful way to target elements with greater control, making your web design more flexible while keeping class names reusable across different tags.

Definition and Usage

Write the HTML tag immediately followed by a dot and the class name — with no space between them. For example, p.highlight matches only <p class="highlight">, not a <div class="highlight">.

📝 Syntax

The syntax for the element.class selector is:

element.class {
  /* CSS properties */
}

Replace element with the HTML tag and class with the class name. The selector applies only to instances of that element that have the specified class.

Basic Example

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

p.intro {
  font-weight: 700;
  font-style: italic;
}

p.highlight {
  background: #fef9c3;
  border: 1px solid #fbbf24;
  padding: 0.5rem;
}

Specificity Comparison

Syntax Rules

• Write the element and class with no space between them.
• Class names are case-sensitive — p.Intro and p.intro are different.
• The element must match the HTML tag exactly (use lowercase for HTML5 tags).
• You can chain more classes: button.btn.btn-primary (no spaces between classes).
• Higher specificity than .class alone — useful for overrides.

Related Selectors

• .class — matches any element with a class
• element — matches all elements of a tag type
• #id — matches one unique element by id
• element element — descendant combinator (note the space)

When to Use element.class

element.class is ideal when you need tag-specific styling with a shared class name:

• Reusable components — Style div.card as a block and span.card as an inline badge.
• Blog typography — Apply p.intro only to paragraph intros, not headings.
• Button systems — Differentiate button.btn from a.btn link-buttons.
• Navigation lists — Target li.nav-item without affecting other list items.
• Override .class rules — Increase specificity without adding extra class names to HTML.

Examples Gallery

Practice element.class with blog layouts, card components, button variants, and navigation items.

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

p.intro {
  font-weight: 700;
  font-style: italic;
}

p.highlight {
  background-color: #fef9c3;
  border: 1px solid #fbbf24;
  padding: 0.5rem;
}

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;
}

.btn {
  padding: 0.5rem 1rem;
  border-radius: 0.4rem;
  font-weight: 600;
  cursor: pointer;
}

button.btn {
  background: #2563eb;
  color: #fff;
  border: none;
}

a.btn {
  background: #f0fdf4;
  color: #15803d;
  border: 2px solid #16a34a;
  text-decoration: none;
  display: inline-block;
}

li.nav-item {
  list-style: none;
}

li.nav-item a {
  display: block;
  padding: 0.5rem 0.85rem;
  color: #1e293b;
  text-decoration: none;
  border-radius: 0.35rem;
  font-weight: 600;
}

li.nav-item a:hover {
  background: #e2e8f0;
}

💬 Usage Tips

• Use meaningful class names — Names like intro, card, and nav-item make CSS easier to read.
• Combine with other selectors — Chain with ids or attribute selectors for even more precision when needed.
• Start with .class — Add the element prefix only when you need tag-specific overrides.
• Keep HTML semantic — Use the correct tag; do not rely on CSS alone to change element meaning.
• Document shared classes — When one class name spans multiple tags, note which element.class rules apply where.

⚠️ Common Pitfalls

• Typos in class names — Class names are case-sensitive; p.Intro will not match class="intro".
• Accidental space — p .highlight is a descendant selector, not element.class.
• Wrong tag — div.highlight will not style <p class="highlight">.
• Over-specificity — Adding element prefixes everywhere makes CSS harder to override later.
• Multiple classes — Ensure chained selectors like p.intro.featured match elements that have all listed classes.

♿ Accessibility

• Use semantic HTML — Choose the correct element (button for actions, a for links) rather than styling the wrong tag.
• Color contrast — Ensure text styled with element.class meets WCAG contrast requirements.
• Do not hide content — Avoid using selectors to visually remove important information from sighted users.
• Focus states — Add :focus-visible styles for interactive elements like a.btn.
• Meaningful structure — Use headings (h1.title) in proper order for screen reader navigation.

💡 Best Practices