📘 Lesson · Lesson 26

class vs id

Two Ways to Name Elements — why we name at all

CSS and JavaScript need a way to say "THIS element, not that one". You have two labels for the job: id (a unique name, one element only) and class (a group name, shareable by many). The perfect analogy in your world: id is a roll number — every student has exactly one, and no two share it. class is the section — "10-A" is shared by 40 students at once. A student has one roll number but can belong to several groups (10-A, Science stream, Cricket team).

id — the Unique Name (one per page)

<div id="main-header">...</div>
<form id="admission-form">...</form>

CSS targets it with #:      #main-header { background: navy; }
JavaScript grabs it:        document.getElementById("admission-form")
Links jump to it:           <a href="#main-header">Top</a>

Rule: an id value must appear ONCE per page. Two elements with id="box" is invalid - CSS may style both but JavaScript's getElementById returns only the first.

You have already used ids twice in this course: as bookmark targets for jump-links, and as the for target of a label. Both rely on the id being unique.

class — the Reusable Group (many per page)

<button class="btn">Save</button>
<button class="btn">Cancel</button>
<button class="btn">Delete</button>

CSS targets with .:   .btn { padding: 10px; border-radius: 8px; }

All three buttons get the same padding and rounded corners from ONE rule. Change .btn once → all buttons update. That reuse is the whole point.

This is why real websites have hundreds of elements but only a few dozen classes — write the style once, apply it everywhere. Imagine styling 50 buttons individually by id; class removes that pain entirely.

Multiple Classes on One Element — the space-separated superpower

<button class="btn btn-danger btn-large">Delete</button>
                     │    │          │
                     │    │          size class
                     │    colour class
                     base button class

One element can wear many classes at once, separated by spaces — each adds its own slice of style. This is exactly how CSS frameworks like Bootstrap and Tailwind work: you compose an element's look by stacking small classes. Mental model: base outfit (btn) + colour (btn-danger) + size (btn-large) = the final button. An element has at most ONE id but can have UNLIMITED classes.

Which One, When?

	id	class
How many per page	Unique — one element	Reusable — many elements
Per element	At most one	Many (space-separated)
CSS selector	#name	.name
Best for	One specific thing: a form, the header, a jump target	Repeated styles: buttons, cards, alerts

The modern practice: for styling, prefer classes almost always — even for one-off elements — because classes keep CSS flexible and reusable. Reserve id for things that are genuinely unique and need a firm handle: JavaScript hooks, form/label pairing, and bookmark anchors. "Class for style, id for hooks" is a solid rule of thumb.

Exam Corner

Q: Difference between id and class? id is unique (one element per page); class is reusable (shared by many). One element: at most one id, many classes.

Q: CSS symbols for each? id → #, class → .

Q: Can one element have multiple classes? Yes — space-separated: class="a b c".

Q: Can two elements share an id? No — id must be unique per page.

Q: For styling repeated buttons, id or class? class — write once, apply to all.

Elements को नाम देने के दो तरीके — नाम देते ही क्यों हैं

CSS और JavaScript को यह कहने का तरीका चाहिए कि "YEH element, वह नहीं". इस काम के दो label हैं: id (अनोखा नाम, सिर्फ एक element) और class (group का नाम, कई शेयर कर सकते हैं). आपकी दुनिया की perfect analogy: id roll number है — हर student का ठीक एक, कोई दो नहीं share करते. class section है — "10-A" एक साथ 40 students का. Student का एक roll number पर कई groups में हो सकता है (10-A, Science stream, Cricket team).

id — अनोखा नाम (page में एक)

<div id="main-header">...</div>
<form id="admission-form">...</form>

CSS # se target karta hai:  #main-header { background: navy; }
JavaScript pakadta hai:     document.getElementById("admission-form")
Links jump karte hain:      <a href="#main-header">Top</a>

Rule: id value page me EK BAAR aani chahiye. Do elements par id="box" invalid hai - CSS dono ko style kar de par JavaScript ka getElementById sirf pehla deta hai.

आप इस course में ids दो बार use कर चुके हैं: jump-links के bookmark targets के रूप में, और label के for target के रूप में. दोनों id के अनोखे होने पर टिके हैं.

class — दोबारा वाला Group (page में कई)

<button class="btn">Save</button>
<button class="btn">Cancel</button>
<button class="btn">Delete</button>

CSS . se target:   .btn { padding: 10px; border-radius: 8px; }

Teeno buttons ko EK rule se same padding aur rounded corners milte hain. .btn ek baar badlo → saare buttons update. Wahi reuse asli maksad hai.

इसीलिए असली websites में सैकड़ों elements पर सिर्फ कुछ दर्जन classes होती हैं — style एक बार लिखो, हर जगह लगाओ. 50 buttons को id से अलग-अलग style करने की कल्पना कीजिए; class वह दर्द पूरी तरह हटा देती है.

एक Element पर कई Classes — space से अलग superpower

<button class="btn btn-danger btn-large">Delete</button>
                     │    │          │
                     │    │          size class
                     │    colour class
                     base button class

एक element एक साथ कई classes पहन सकता है, spaces से अलग — हर एक अपना style का हिस्सा जोड़ती है. Bootstrap और Tailwind जैसे CSS frameworks ठीक ऐसे ही काम करते हैं: छोटी classes जोड़-जोड़कर element का रूप बनाते हैं. Mental model: base outfit (btn) + colour (btn-danger) + size (btn-large) = final button. Element पर ज़्यादा से ज़्यादा EK id पर UNLIMITED classes.

कौन-सा, कब?

	id	class
Page में कितने	अनोखा — एक element	Reusable — कई elements
प्रति element	ज़्यादा से ज़्यादा एक	कई (space से अलग)
CSS selector	#name	.name
Best for	एक खास चीज़: form, header, jump target	दोहराए style: buttons, cards, alerts

Modern practice: styling के लिए लगभग हमेशा classes पसंद कीजिए — एक-बार के elements के लिए भी — क्योंकि classes CSS को flexible और reusable रखती हैं. id उन चीज़ों के लिए बचाइए जो सच में अनोखी हों और मज़बूत handle चाहें: JavaScript hooks, form/label pairing, और bookmark anchors. "Style के लिए class, hooks के लिए id" पक्का rule of thumb है.

Exam Corner

Q: id और class में अंतर? id अनोखा (page में एक element); class reusable (कई share करते हैं). एक element: ज़्यादा से ज़्यादा एक id, कई classes.

Q: दोनों के CSS symbols? id → #, class → .

Q: क्या एक element की कई classes हो सकती हैं? हां — space से अलग: class="a b c".

Q: क्या दो elements एक id share कर सकते हैं? नहीं — id page में अनोखी होनी चाहिए.

Q: दोहराए buttons style करने को id या class? class — एक बार लिखो, सब पर लगाओ.

← Back to HTML Tutorial

💻 Live Code Editor

इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.

👁 Live Preview

सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का console.log देखने के लिए F12 दबाइए.