CSS element.class Selector

Beginner
5 min read
Updated: Oct 2026
3 examples
Live preview
CSS element.class selector combining a tag name with a class
Definition

Definition and Usage

The element.class selector is a compound selector: a type name and a class with no space between them (for example p.intro or div.card).

It matches only that tag when it also has that class. Use it when the same class name appears on different tags and you want to style one tag only. Compare with a bare .class (any tag) and with a descendant space (p .intro).

Baseline · Widely available.

Not deprecated. Core CSS since CSS1. Extremely broad browser support.

Syntax

CSS Syntax

syntax.css
element.class { /* declarations */ }

Examples: p.intro · div.card · button.primary · li.spacious.elegant

Forms

Selector Forms

PatternMatchesTry it
p.highlightOnly p elements with class highlightTry it
button.primaryButtons with class primary (not links)Try it
div.cardOnly div cards, not other tags with cardTry it
vs p .noteSpace = descendant, not compoundTry it
Approach

How to Use element.class

Write the tag, a dot, then the class — no space.

  1. Choose the HTML tag to limit (e.g. p, div, button).
  2. Add a dot and the class name with no space: p.intro.
  3. Put that class on matching elements in HTML.
  4. Use a bare .intro instead when every tag with that class should match.
PieceRequired?Role
Type (tag)YesLimits which element kinds can match
Dot + classYesRequires that class on the same element
No spaceYesKeeps it one compound selector
Extra classesOptionalChain more: li.a.b
Try it

Live Preview

Switch between .note, p.note, and p .note. Highlighted items show what matches.

Blue highlight = matched. Watch how span.note and nested .note behave.

Markup

p.note

span.note

Outer p nested .note

p.note — only the paragraph with class note matches

Code

CSS Examples

Each snippet focuses on the element.class pattern. Use Try It Yourself for a live editor.

Example 1 — Highlight Only Paragraphs

Style p.highlight without affecting other tags that reuse the class.

CSS
<style>
  p.highlight {
    background: #fef08a;
    color: #854d0e;
  }
</style>

<p class="highlight">Highlighted paragraph</p>
<span class="highlight">Same class on a span</span>
<p>Normal paragraph</p>
Try It Yourself

How It Works

  1. Compound rule. p.highlight needs both tag p and class highlight.
  2. First line matches. It is a paragraph with that class.
  3. Span skipped. Same class, wrong tag.
  4. Plain p skipped. Right tag, missing class.

Example 2 — Same Class, Different Tags

Reuse primary on a button and a link; style only the button.

CSS
<style>
  button.primary {
    background: #2563eb;
    color: #fff;
    border: none;
    padding: 0.5rem 1rem;
  }
</style>

<button class="primary" type="button">Save</button>
<a class="primary" href="#">Learn more</a>
Try It Yourself

How It Works

  1. Shared class. Both use primary.
  2. Typed selector. button.primary limits styling to buttons.
  3. Link stays plain. Wrong element type.
  4. When to use. Useful if one class name serves two different UI roles.

Example 3 — Only div.card

Scope card styles to div so other tags with class card stay untouched.

CSS
<style>
  div.card {
    border: 1px solid #cbd5e1;
    padding: 0.75rem;
    border-radius: 0.5rem;
  }
</style>

<div class="card">Styled card</div>
<article class="card">Same class on article</article>
Try It Yourself

How It Works

  1. Rule. div.card requires both div and card.
  2. First block matches. Border and padding apply.
  3. Article skipped. Class matches, tag does not.
  4. Vs .card. A bare class would style both.

Edge Cases & Pitfalls

If the wrong elements light up, check these first.

space

No space vs space

p.note is one element. p .note is a descendant. A single space changes the meaning completely.

vs .class

Narrower than a bare class

.note hits every tag. Prefer element.class only when you truly need that tag limit.

specificity

Slightly higher specificity

div.card (0,1,1) beats .card (0,1,0). That can make overrides harder later.

HTML

Class must be on that element

p.intro does not match a p whose child has class intro. The class belongs on the same node.

chain

Multiple classes on one tag

li.a.b requires both classes on the same li. Order in the class attribute does not matter.

Compatibility

Browser Support

The element.class compound selector is a browser CSS selector. Node.js, Deno, and Bun do not apply it.

✓ Baseline · Widely available

element.class

Supported everywhere CSS is supported (CSS1-era). Safe for all teaching and production use.

100% Core support
Google Chrome 1+
Full support
Mozilla Firefox 1+
Full support
Apple Safari 1+
Full support
Microsoft Edge 12+
Full support
Opera 3.5+
Full support
Samsung Internet 1+
Full support
Internet Explorer 3+
Full support
element.class Universal

Bottom line: No prefixes. No polyfills. It is not a runtime API.

Remember

Key Takeaways

  • Role: match one tag only when it also has a given class.
  • Syntax: tag.class with no space between them.
  • vs space: p .x is a descendant; p.x is compound.
  • Tip: prefer bare .class unless you need the tag limit.

One line: element.class means “this tag with this class” — one element, no space.

Frequently Asked Questions

It is a compound selector: a type (tag) name immediately followed by a class, with no space — for example p.intro or div.card. It matches only that tag when it also has that class.
.card matches any element with that class. div.card matches only div elements with that class, so a span.card would not match.
No. p.highlight is one element. p .highlight (with a space) is a descendant selector — a .highlight element nested inside a p.
Yes. div.card is (0,1,1) — one class and one type — so it beats a lone .card at (0,1,0).
Yes. li.spacious.elegant matches an li that has both spacious and elegant in its class list.
Yes. It has been in CSS since CSS1 and is Baseline Widely available. It is a selector pattern, not a Node.js feature.

Next: #id

Learn how to select a unique element with an ID selector.

#id tutorial →

About the author

Mari Selvan M P
Mari Selvan M P 🔗

Developer, cloud engineer, and technical writer

  • Experience 12 years building web and cloud systems
  • Focus Full Stack Development, AWS, and Developer Education

I write practical tutorials so students and working developers can learn by doing—from databases and APIs to deployment on AWS.

AWS Certified Developer – Associate (Credly)

8 people found this page helpful

CSS .class Selector CSS #id Selector