Detailed explanation
Class selectors and ID selectors both target HTML elements, but they differ in uniqueness, reusability, and CSS specificity. A class selector such as .btn-primary matches elements whose class attribute contains that name. Multiple elements can share a class, and one element can have several classes, such as class="btn btn-primary". An ID selector such as #submit-button matches an element with that exact ID. HTML requires an ID value to be unique within a document, making it an identifier rather than a reusable styling label.
Specificity explains why IDs can make styling difficult. In the common three-column notation, an ID selector has specificity 1-0-0, while a class selector has 0-1-0. Some teaching material includes a separate leading position for inline styles, expressing these as (0,1,0,0) and (0,0,1,0). When competing declarations have the same origin, importance, and cascade-layer precedence, the selector with higher specificity wins. Therefore, #submit-button { background: blue; } beats .btn-primary { background: green; }, even if the class rule appears later. Specificity is compared column by column; adding more classes does not outweigh one ID.
Classes make components easier to reuse and change. For example, use .btn-primary { background: blue; } with <button id="submit-button" class="btn-primary">Submit</button>. The class controls presentation, while the ID can serve as a fragment target, an accessibility reference, or a JavaScript lookup. Another button can reuse btn-primary without duplicating an ID. Keeping ID selectors out of CSS also makes themes, responsive rules, and component variants easier to implement without increasingly specific selectors or unnecessary !important declarations.
Avoiding IDs for styling is a maintainability convention, not a browser restriction. Browsers accept ID selectors, and an ID rule can still be overridden through other cascade mechanisms. Interviewers usually look for three ideas: IDs must be unique, classes support reusable styling, and ID specificity makes ordinary overrides harder. Also distinguish HTML validity from selector matching: duplicate IDs are invalid HTML, but an ID selector can still style every matching element.
Key points to remember
- Use .name for a class selector and #name for an ID selector.
- Classes can be shared across elements; each ID value must be unique within a document.
- One element can have multiple classes, enabling composable component styles.
- ID selectors outrank class selectors when earlier cascade criteria are equal.
- Prefer classes for styling; reserve IDs for identity-based uses such as anchors, accessibility references, or JavaScript hooks.
Common mistakes candidates make
- Claiming that a later class rule always overrides an earlier ID rule.
- Reusing an ID across several elements instead of using a shared class.
- Saying IDs cannot be styled or cannot be overridden, rather than explaining the maintenance trade-off.
Likely follow-up questions
Can an element have both an ID and a class?
Yes, they serve different purposes and can coexist on the same element. Use a class for reusable presentation and an ID when a unique reference is needed.
Can !important override an ID selector?
An author declaration marked !important beats a normal author declaration, even if the normal declaration uses an ID selector. Avoid using it merely to fight specificity; simplifying the selectors is usually easier to maintain.
Must JavaScript use IDs to select elements?
No, JavaScript can select elements using classes, attributes, and other CSS selectors through querySelector or querySelectorAll. Dedicated data attributes can also provide JavaScript hooks without coupling behaviour to styling classes.
Interview tip: Explain uniqueness and reuse first, then demonstrate specificity with one competing ID rule and class rule.