Detailed explanation
The id and class attributes identify HTML elements for different purposes. An id identifies one particular element and must be unique within the document, while a class represents a reusable group that any number of elements can share. An element can have both attributes. In <div id="main-header" class="header dark-theme">...</div>, main-header is the element’s unique identifier, while header and dark-theme are two separate classes. The class attribute contains a whitespace-separated list; an id value must not contain ASCII whitespace.
In CSS, an ID selector starts with #, such as #main-header, while a class selector starts with a dot, such as .header. Classes are generally preferred for reusable styling because they support consistent components and are easier to override. An ID selector has specificity 1-0-0, whereas a class selector has specificity 0-1-0. When declarations compete within the same cascade origin, importance, and layer, an ID selector beats a class selector. However, specificity is not the entire cascade: an ID selector does not automatically override every other declaration.
IDs also provide references that have meaning beyond styling. A link with href="#main-header" can navigate to the element with that ID. A label’s for attribute references the id of its associated form control, and accessibility attributes such as aria-labelledby can reference element IDs. JavaScript can retrieve an element with document.getElementById("main-header") or select class members using document.querySelectorAll(".header"). Neither attribute is restricted to CSS or JavaScript; both can serve as script hooks when appropriate.
Browsers do not enforce uniqueness by rejecting duplicate IDs, so a page with duplicates may still render. Nevertheless, duplicate IDs violate HTML’s uniqueness requirement and can make navigation, scripting, and element associations unreliable. For example, getElementById returns the first matching element in document order rather than all duplicates. Interviewers usually expect you to explain uniqueness, reuse, selector syntax, multiple classes, and practical ID references—not simply say that IDs are for JavaScript and classes are for CSS.
Key points to remember
- An id must be unique within the document; a class can be shared by many elements.
- One element can have an id and multiple whitespace-separated classes.
- CSS uses #name for an ID selector and .name for a class selector.
- ID selectors have higher specificity than class selectors, but other cascade rules still apply.
- IDs support fragment links and element associations; classes support reusable styling and grouping.
Common mistakes candidates make
- Repeating the same id across elements because the browser still displays the page.
- Claiming that IDs are only for JavaScript and classes are only for CSS.
- Using ID selectors for every style, making reusable components harder to override.
Likely follow-up questions
Can an element have multiple classes?
Yes, separate class names with whitespace, as in class="header dark-theme". Both .header and .dark-theme match this element, while .header.dark-theme matches elements that have both classes.
What happens if two elements have the same id?
The document violates HTML’s uniqueness requirement, although both elements may render and match the same CSS ID selector. document.getElementById() returns only the first matching element in document order, and ID-based references may target the wrong element.
If an ID rule and a class rule set different colours, which wins?
If both rules match the element and have the same cascade origin, importance, and layer, the ID rule wins because it has higher specificity. A class declaration marked !important can beat a normal ID declaration, so specificity alone does not determine every result.
Interview tip: Start with uniqueness versus reuse, explain the supplied example, and then mention selector syntax and one practical ID reference.