What is the difference between the HTML id and class attributes?
Learn the difference between HTML id and class attributes: uniqueness, CSS selectors, specificity, and when to use each for clean, maintainable markup.
Expected Interview Answer
An id is a unique identifier for a single element on a page, while a class is a reusable label that can be shared by many elements to group them for styling or scripting.
An id must be unique within the document and is targeted in CSS with the # selector; because it is unique, it also serves as an in-page anchor and a fast JavaScript lookup via getElementById. A class can repeat across any number of elements, is targeted with the . selector, and an element can carry several space-separated classes at once. In CSS specificity, an id (0,1,0,0) outranks a class (0,0,1,0), which is why classes are preferred for reusable, maintainable styling.
- id uniquely identifies one element for anchors and scripting
- class enables reusable, shareable styling across many elements
- Multiple classes can combine on a single element
- Classes keep specificity low and stylesheets maintainable
- id gives fast getElementById lookups and URL fragment targets
AI Mentor Explanation
An id is like a player's unique jersey number in a squad — only one person wears number 18, so calling it out identifies exactly one player. A class is like the label 'batsman', which many players share; you can address all batsmen together for a team talk, but the number pinpoints the single individual.
Step-by-Step Explanation
Step 1
Define uniqueness
Assign an id when only one element on the page should carry that name; reuse a class when several elements share styling or behaviour.
Step 2
Write the markup
Use id="header" for the single header and class="card" on every repeating card element.
Step 3
Target in CSS
Select an id with #header and a class with .card; remember an element can hold multiple space-separated classes.
Step 4
Consider specificity
Prefer classes for styling because #id (0,1,0,0) outranks .class (0,0,1,0) and makes overrides harder.
Step 5
Use ids for anchors and scripting
Link to #section with URL fragments and select with getElementById for fast, unambiguous JavaScript access.
What Interviewer Expects
- Knows id is unique while class is reusable
- Correct CSS selector syntax (# vs .)
- Understands an element can have multiple classes
- Aware of specificity differences between id and class
- Knows id doubles as an anchor and getElementById target
Common Mistakes
- Reusing the same id on multiple elements
- Using ids for styling everything, causing specificity wars
- Confusing the # and . selector prefixes
- Forgetting classes can be space-separated and combined
- Believing class names must be unique
Best Answer (HR Friendly)
“An id is a unique name for one specific element, like a personal ID card, so it should only appear once on a page. A class is a shared label you can put on many elements at once, which makes it perfect for styling groups of similar things consistently.”
Code Example
<header id="site-header">Logo</header>
<article class="card featured">First card</article>
<article class="card">Second card</article>
<article class="card">Third card</article>
<style>
#site-header { background: #0f172a; color: #fff; }
.card { border: 1px solid #e2e8f0; padding: 1rem; }
.card.featured { border-color: gold; }
</style>Follow-up Questions
- How does CSS specificity rank ids versus classes?
- Can a single element have both an id and multiple classes?
- Why are classes preferred over ids for styling components?
- What happens if two elements share the same id?
- How do id fragments enable in-page anchor navigation?
MCQ Practice
1. Which statement about the id attribute is correct?
An id must be unique per page; it is selected with # in CSS and is accessible via getElementById.
2. How do you select elements with class="card" in CSS?
Classes are selected with a leading dot (.card); the # prefix is reserved for ids.
3. Which has higher CSS specificity?
An id selector (0,1,0,0) outranks a class selector (0,0,1,0), which is why overrides with ids are harder.
Flash Cards
id vs class in one line — id is a unique per-page identifier (#); class is a reusable, shareable label (.).
CSS selector prefixes — # targets an id, . targets a class.
Can an element have multiple classes? — Yes — space-separated (class="card featured"). It can have only one id.
Which wins in specificity? — id (0,1,0,0) beats class (0,0,1,0).
When to use an id — For unique anchors (#section) and fast getElementById scripting.