ID vs Class Selectors in CSS: What's the Difference?
Learn the difference between id and class selectors in CSS, how specificity treats them differently, and when to use each for maintainable styling.
Expected Interview Answer
An id selector (#name) targets exactly one unique element per page and carries higher specificity, while a class selector (.name) can be reused on many elements and is meant for shared, repeatable styling.
HTML allows only one element with a given id per document, so #header should point to a single unique node, often used as a hook for in-page anchors or JavaScript (getElementById). Classes are designed to be reused across any number of elements — .btn or .card can style dozens of elements consistently, and a single element can carry multiple classes at once. In CSS specificity, an id contributes a higher weight (0,1,0,0) than a class (0,0,1,0), so an id rule beats a class rule targeting the same property regardless of source order, which is exactly why most style guides prefer classes for styling and reserve ids for anchors, ARIA references, and scripting hooks. Overusing ids for styling makes specificity harder to override later and tends to produce !important-laden CSS.
- Classes enable reusable, maintainable styling across many elements
- IDs give a stable, unique hook for JS and in-page anchors
- Understanding specificity avoids fighting your own CSS with !important
- Multiple classes per element allow composable styling
- Keeps styling authority predictable across a large codebase
AI Mentor Explanation
An id is like a player's national cap number — only one player in history ever holds that exact number, making it perfect for looking up one specific record. A class is like the label 'all-rounder' — dozens of players across every team can share that same tag, which is exactly what you want when styling a whole group the same way.
Step-by-Step Explanation
Step 1
Use id for uniqueness
An id (#name) should appear on exactly one element per page, ideal for anchors, ARIA references, and JS hooks.
Step 2
Use class for reuse
A class (.name) can be applied to any number of elements, and a single element can carry multiple space-separated classes.
Step 3
Understand the specificity gap
IDs carry specificity weight (0,1,0,0), higher than a class's (0,0,1,0), so id rules override class rules on conflicting properties.
Step 4
Prefer classes for styling
Most style guides style with classes and reserve ids for JavaScript hooks or anchor links, keeping specificity manageable.
Step 5
Combine classes for composition
Multiple classes on one element (class="btn btn-primary") let you compose reusable style building blocks.
What Interviewer Expects
- States ids must be unique per page, classes can repeat
- Knows the specificity difference between id and class
- Recommends classes for styling, ids for hooks/anchors
- Understands an element can carry multiple classes
- Can explain why heavy id-based styling causes specificity problems
Common Mistakes
- Using the same id on multiple elements in one page
- Styling everything with ids, leading to specificity wars and !important
- Forgetting an element can have multiple classes at once
- Confusing id's uniqueness rule with class's reusability
- Not knowing ids are still valid CSS selectors, just higher specificity
Best Answer (HR Friendly)
“An ID is a one-of-a-kind label used for a single, specific element on a page, similar to a social security number. A class is a reusable tag you can apply to many elements so they all share the same styling, like putting the same uniform on a whole team.”
Code Example
<header id="site-header">
<button class="btn btn-primary">Sign up</button>
<button class="btn btn-secondary">Log in</button>
</header>#site-header .btn { color: white; } /* id + class: high specificity */
.btn { color: black; } /* class only: lower specificity */
/* Buttons render white, because the id-prefixed rule wins */Follow-up Questions
- What is CSS specificity and how is it calculated?
- Why do most style guides discourage styling with ids?
- Can an element have both an id and multiple classes at once?
- What happens if two elements share the same id by mistake?
- How does specificity compare between a class selector and an attribute selector?
MCQ Practice
1. How many elements on a valid HTML page should share the same id?
An id must be unique within a document — only one element should carry a given id value.
2. Which selector has higher CSS specificity?
ID selectors carry a specificity weight of (0,1,0,0), which outranks a class selector's (0,0,1,0).
3. Which is a typical best practice for classes vs ids?
Classes are reusable and easier to override, so most style guides style with classes and use ids sparingly for unique hooks.
Flash Cards
Can an id be reused on multiple elements? — No — an id must uniquely identify a single element per page.
Can a class be reused? — Yes — classes are designed to apply the same styling to many elements.
Which has higher specificity, id or class? — ID (0,1,0,0) beats class (0,0,1,0) in CSS specificity.
What's a common use for ids besides styling? — In-page anchors (#section) and JavaScript hooks like document.getElementById.