Questions
5 of 7
Basics
Common Tags
Attributes and Elements
Lists
Text tags and Formatting
Input and Forms
Block and Inline Elements
Box model
Semantic Tags
Links and Images
Media and Embeds
Tables
HTML entities
HTML and CSS
Performance
SEO
Progressive Enhancement
HTML5
Custom Elements & Web Components
HTML5 APIs
SPAs
WCAG
Security
Best Practices
Can you have multiple classes on an HTML element?
Difficulty: 4/10
class attribute, CSS specificity, DOM manipulation
Using Multiple Classes in HTML
Yes, in HTML an element can have multiple classes. You simply separate the class names with spaces inside the class attribute. This allows an element to inherit styles or behaviors from multiple CSS class selectors.
Example: Multiple Classes
Key Points About Multiple Classes
- 1
Separate multiple class names with a space (e.g., class="btn primary large").
- 2
An element can inherit styles from all the classes applied to it.
- 3
Order of class names in the attribute does not matter, but CSS rules with higher specificity or later in the stylesheet take precedence.
- 4
Multiple classes are commonly used to create reusable, modular styling in CSS frameworks like Bootstrap or Tailwind.
Scenario Questions
0-2 years experience
- 1How would you add two CSS classes to a button element in plain HTML?
- 2If you accidentally list the same class name twice in the class attribute, what effect does that have on styling?
- 3You need to style a paragraph differently in two contexts; how would you use multiple classes to achieve that?
2-5 years experience
- 1A component’s styles stopped applying after you added a new class. Walk me through how you’d debug the problem.
- 2When building a reusable card component, how would you let consumers add custom classes without breaking the component’s default styles?
- 3Explain the trade‑offs between using many utility classes versus a single semantic class for a complex element.
5-8 years experience
- 1Our team is migrating from a monolithic stylesheet to CSS‑in‑JS. How would you handle existing elements that rely on multiple class names to avoid visual regressions?
- 2At scale, many classes on an element can hurt performance and maintainability. What strategies would you use to limit class bloat while keeping styling flexibility?
- 3Design a system for a large e‑commerce site where components need theme overrides via extra classes. How would you keep the CSS modular and avoid specificity wars?
8+ years experience
- 1We have a legacy codebase with thousands of pages where elements often have long, concatenated class strings. The roadmap includes a redesign using a design system and a utility‑first framework. How would you plan the migration to replace existing multi‑class patterns while minimizing risk across teams?
- 2Multiple teams independently add classes to shared components, leading to naming collisions. What governance and tooling would you put in place at the organization level to manage class naming and ensure consistency?
- 3If you were tasked with defining a company‑wide CSS architecture that balances the need for multiple classes per element, performance, and future scalability, what principles and processes would you establish?
Follow-up Questions
- Can you show a short HTML snippet that adds two classes to an element?
- How would you programmatically verify that the expected classes are present at runtime?
- What happens if the same class name appears twice in the class attribute?