در CSS، انتخابگرها (Selectors) برای اعمال استایل به عناصر HTML استفاده می‌شوند. دو مورد از پرکاربردترین انتخابگرها، کلاس‌ها (Class) و آیدی‌ها (ID) هستند که به ما امکان می‌دهند عناصر مشخصی را انتخاب و سفارشی‌سازی کنیم.

در این مقاله، به بررسی روش‌های انتخاب و استایل‌دهی عناصر با Class و ID می‌پردازیم.

۱. تفاوت بین Class و ID در CSS

✅ استفاده از Class برای عناصر مشابه توصیه می‌شود، در حالی که ID فقط برای یک عنصر خاص در صفحه باید استفاده شود.

۲. انتخاب و استایل‌دهی عناصر با Class در CSS

✅ تعریف کلاس در HTML و استفاده از آن در CSS

برای تعریف یک کلاس در HTML، از ویژگی class استفاده می‌کنیم و در CSS آن را با . (نقطه) انتخاب می‌کنیم.

مثال:

<p class="highlight">این یک متن با کلاس است.</p>

.highlight {
    color: red;
    font-size: 20px;
    font-weight: bold;
}

🔹 نتیجه: تمام عناصر دارای کلاس highlight قرمز و پررنگ می‌شوند.

✅ استفاده از یک کلاس در چندین عنصر

کلاس‌ها را می‌توان به چندین عنصر اختصاص داد تا استایل یکسانی روی آن‌ها اعمال شود.

<h2 class="title">عنوان اول</h2>
<h2 class="title">عنوان دوم</h2>
<p class="title">این یک پاراگراف با کلاس title است.</p>

.title {
    color: blue;
    text-align: center;
}

🔹 نتیجه: تمام <h2> و <p>‌هایی که کلاس title دارند، آبی و وسط‌چین می‌شوند.

۳. انتخاب و استایل‌دهی عناصر با ID در CSS

✅ تعریف ID در HTML و استفاده از آن در CSS

برای تعریف یک آیدی در HTML، از ویژگی id استفاده می‌کنیم و در CSS آن را با # (هشتگ) انتخاب می‌کنیم.

مثال:

<p id="main-text">این یک متن با آیدی است.</p>

#main-text {
    color: green;
    font-size: 24px;
}

🔹 نتیجه: فقط همان یک پاراگراف که دارای id="main-text" است، سبز و بزرگ‌تر می‌شود.

✅ توجه مهم درباره استفاده از ID

🔸 هر ID باید منحصربه‌فرد باشد و نباید در یک صفحه بیش از یک بار استفاده شود.
🔸 اگر دو عنصر یکسان دارای ID باشند، مرورگر ممکن است به درستی آن را پردازش نکند.

🚫 نمونه نادرست:

<p id="unique">متن ۱</p>
<p id="unique">متن ۲</p>  <!-- نادرست: ID نباید تکراری باشد -->

۴. ترکیب انتخابگرهای Class و ID برای استایل‌دهی دقیق‌تر

می‌توان کلاس و آیدی را ترکیب کرد تا انعطاف‌پذیری بیشتری در طراحی داشته باشیم.

<p id="main-text" class="highlight">این یک متن ترکیبی است.</p>

#main-text {
    font-size: 24px;
}

.highlight {
    color: red;
    font-weight: bold;
}

🔹 نتیجه: عنصر دارای id="main-text" اندازه‌ی فونت ۲۴ پیکسل و رنگ قرمز خواهد داشت.

۵. اولویت‌بندی در انتخابگرهای CSS (Specificity)

اگر یک عنصر همزمان دارای Class و ID باشد، اولویت (Specificity) ID بیشتر است و بر Class غلبه می‌کند.

مثال:

<p id="main-text" class="highlight">متن با کلاس و آیدی</p>

.highlight {
    color: red;
}

#main-text {
    color: green;
}

🔹 نتیجه: رنگ متن سبز خواهد بود، زیرا ID اولویت بیشتری نسبت به Class دارد.

✅ ترتیب اولویت‌بندی انتخابگرها در CSS:
۱. !important (بالاترین اولویت)
۲. Inline CSS (داخل style="..." در HTML)
۳. ID (#)
۴. Class (.) و Attributes
۵. Tag (h1, p, div)

۶. چه زمانی از Class و چه زمانی از ID استفاده کنیم؟

✅ از Class استفاده کنید اگر:
✔ نیاز دارید چندین عنصر یک استایل مشابه داشته باشند.
✔ در طراحی‌های ریسپانسیو و انعطاف‌پذیر به راحتی قابل استفاده باشد.
✔ بتوانید در CSS خارجی (External CSS) آن را مجدداً استفاده کنید.

✅ از ID استفاده کنید اگر:
✔ فقط یک عنصر یکتا را در صفحه هدف قرار می‌دهید.
✔ می‌خواهید از آن در جاوااسکریپت برای تغییرات داینامیک استفاده کنید.
✔ باید اولویت خاصی نسبت به سایر استایل‌ها داشته باشد.

۷. نتیجه‌گیری

• Class (.) برای استایل‌دهی به چندین عنصر مشابه مناسب است، در حالی که ID (#) فقط برای یک عنصر خاص استفاده می‌شود.
• ID دارای اولویت بیشتری نسبت به Class است، اما نباید در یک صفحه تکرار شود.
• استفاده صحیح از انتخابگرهای CSS به بهینه‌سازی و نگهداری بهتر کدها کمک می‌کند.