Q&A

The "class" attribute in CSS

By AlgoInsight Team2026-06-07frontendreact-hooksweb-developmentcsshtml

Overview

The class attribute connects HTML and CSS. You tag elements with class names in HTML, then write CSS rules using .classname to style all matching elements at once. Because classes are reusable and combinable, they're the backbone of maintainable styling - far preferable to inline styles or over-using IDs.

graph LR
    A["HTML: <div class='card'>"] --> B["CSS: .card { ... }"]
    B --> C[Styles ALL elements with that class]
    A --> D[One element can have multiple classes]
    style B fill:#1e1b4b,color:#fff

Applying a Class in HTML

<button class="btn">Click</button>
<p class="text-muted">Secondary text</p>

<!-- multiple classes, space-separated -->
<button class="btn btn-primary large">Submit</button>

Targeting Classes in CSS

A class selector is a . followed by the name:

.btn {
  padding: 8px 16px;
  border-radius: 6px;
}
.text-muted {
  color: gray;
}

Every element carrying class="btn" gets these styles - reuse across the whole page.

Multiple Classes and Composition

An element can have several classes, and styles combine. This enables a composable, "utility" approach:

<button class="btn btn-primary">Save</button>

.btn         { padding: 8px 16px; border: none; }   /* base */
.btn-primary { background: #6366f1; color: white; } /* modifier */

The button gets both rule sets. Targeting elements that have both classes uses no space between selectors:

.btn.btn-primary { font-weight: bold; }   /* elements with BOTH classes */

Class vs ID

Prefer classes for styling; reserve IDs for unique elements/anchors. IDs' high specificity can make overrides harder.

Combining with Other Selectors

ul.menu li        { ... }   /* <li> inside a <ul class="menu"> */
.card > .title    { ... }   /* direct child with class title */
.btn:hover        { ... }   /* state */
button.btn        { ... }   /* <button> elements that also have class btn */

Specificity (brief)

A single class selector has specificity 10, less than an ID (100) but more than a tag selector (1). When rules conflict, higher specificity wins; equal specificity → later rule wins. Stacking classes (.a.b.c) raises specificity. Understanding this prevents "why isn't my style applying?" confusion.

Manipulating Classes with JavaScript

Classes double as JS hooks for dynamic styling:

element.classList.add("active");
element.classList.remove("hidden");
element.classList.toggle("open");
element.classList.contains("btn");   // true/false

Toggling a class is the standard way to change appearance/state from JS without inline styles.

Why This Matters in Interviews

CSS/front-end interviews use this to check selector fundamentals. Essentials: the .classname selector, that classes are reusable (many elements) while IDs are unique, that an element can hold multiple space-separated classes (and .a.b targets elements with both), the class-vs-id trade-off and specificity (class 10 vs id 100), and classList for JS manipulation. Knowing why classes are preferred over IDs/inline styles for styling shows maintainability awareness.

Common Pitfalls

• Forgetting the leading dot in the CSS selector (btn {} targets a <btn> tag, not the class).
• Confusing .a.b (same element has both) with .a .b (descendant) - the space changes meaning.
• Overusing IDs for styling, causing specificity headaches.
• Reusing an id on multiple elements (invalid; classes are for that).
• Inline styles overriding class styles unexpectedly (inline has very high specificity).

References

• MDN class selectors: https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors
• MDN CSS specificity: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

More answers