انتخاب‌گرها در CSS: چطور به هدف شلیک کنیم؟!

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

انتخاب‌گرهای CSS کلاً به ۵ دسته بزرگ تقسیم می‌شوند:

1. انتخاب‌گرهای ساده (Simple selectors): پیدا کردن عناصر بر اساس اسم، کلاس یا آی‌دی (پایه‌ای‌ترین حالت).

2. انتخاب‌گرهای ترکیبی (Combinator selectors): پیدا کردن عناصر بر اساس رابطه‌ای که با هم دارند (مثل فرزندی، خواهری و برادری!).

3. انتخاب‌گرهای شبه‌کلاس (Pseudo-class selectors): پیدا کردن عناصر بر اساس وضعیتی که تویش هستند (مثلاً وقتی کاربر ماوس را روی دکمه می‌برد).

4. انتخاب‌گرهای شبه‌عنصر (Pseudo-elements selectors): استایل دادن به یک بخش خاص از یک عنصر (مثلاً فقط حرف اول یک پاراگراف).

5. انتخاب‌گرهای صفت (Attribute selectors): پیدا کردن عناصر بر اساس ویژگی‌های خاصی که در HTML دارند.

در این بخش می‌خواهیم با هم دسته‌ی اول (انتخاب‌گرهای ساده) که از همه مهم‌تر و پرکاربردتر هستند را یاد بگیریم. آماده‌اید؟

۱. انتخاب‌گر عنصر (Element Selector)؛ شلیک به همه!

این انتخاب‌گر خیلی رک و راست است. اسم تگ HTML را می‌نویسید و CSS بدون هیچ واسطه‌ای می‌رود سراغ تمام تگ‌هایی که با آن اسم در صفحه وجود دارند.

مثال: می‌خواهیم هر چه پاراگراف (<p>) در صفحه داریم، وسط‌چین و قرمز شوند:

p {
  text-align: center;
  color: red;
}

با این کد، بدون استثنا تمام پاراگراف‌های سایت شما تغییر قیافه می‌دهند.

۲. انتخاب‌گر آی‌دی (id Selector)؛ هدف‌گیری تک و منحصربه‌فرد!

در HTML، ویژگی id مثل شماره ملی یا اثر انگشت یک عنصر است؛ یعنی در یک صفحه، فقط و فقط یک عنصر می‌تواند یک آی‌دی مشخص داشته باشد.

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

مثال: می‌خواهیم به عنصری که آی‌دی آن para1 است استایل بدهیم:

#para1 {
  text-align: center;
  color: red;
}

⚠️ نکته طلایی: یادتان باشد که نام آی‌دی هیچ‌وقت نباید با عدد شروع شود! (مثلاً 1para غلط است).

۳. انتخاب‌گر کلاس (Class Selector)؛ استایل‌دهی گروهی و تیمی!

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

در CSS برای صدا زدن یک کلاس، از علامت نقطه (.) استفاده می‌کنیم.

مثال: می‌خواهیم هر عنصری که کلاسش center است، وسط‌چین و قرمز شود:

.center {
  text-align: center;
  color: red;
}

💡 ترفندهای پیشرفته‌تر کلاس‌ها:

• محدود کردن کلاس به یک تگ خاص:

  اگر بخواهید بگویید «فقط پاراگراف‌هایی که کلاسشان center است تغییر کنند، نه بقیه تگ‌ها»، اسم تگ را می‌چسبانید به نقطه:

p.center {
  text-align: center;
  color: red;
}

• استفاده از چند کلاس برای یک عنصر:

  یک عنصر HTML می‌تواند هم‌زمان عضو چند تیم (کلاس) باشد! کافی است اسم کلاس‌ها را با فاصله در HTML بنویسید:

<p class="center large">این پاراگراف هم‌زمان دو تا کلاس دارد.</p>

(در این حالت پاراگراف هم استایل‌های کلاس center را می‌گیرد و هم کلاس large).

⚠️ نکته طلایی: نام کلاس هم مثل آی‌دی نمی‌تواند با عدد شروع شود!

۴. انتخاب‌گر سراسری (Universal Selector)؛ همه با هم!

علامت ستاره (*) در CSS یعنی «همه چیز!». اگر می‌خواهید استایلی بنویسید که روی تک‌تک عناصر کل صفحه (بدون هیچ استثنایی) اعمال شود، از ستاره استفاده کنید.

مثال: می‌خواهیم کل متن‌های سایت بدون توجه به تگ‌شان، آبی و وسط‌چین شوند:

* {
  text-align: center;
  color: blue;
}

۵. انتخاب‌گر گروهی (Grouping Selector)؛ نجات از کدنویسی تکراری!

گاهی اوقات پیش می‌آید که می‌بینید کدهایتان دارند تکرار می‌شوند؛ مثلاً برای تگ‌های h1، h2 و p دقیقاً یک استایل مشابه را نوشته‌اید:

/* کدهای تکراری و طولانی */
h1 { text-align: center; color: red; }
h2 { text-align: center; color: red; }
p  { text-align: center; color: red; }

برای اینکه کدهایتان تمیزتر و خلوت‌تر شود، می‌توانید آن‌ها را با کاما (,) از هم جدا کنید و همه‌ را در یک‌جا بنویسید:

/* کد تمیز و خلاصه‌شده */
h1, h2, p {
  text-align: center;
  color: red;
}

📋 جمع‌بندی سریع (کارت تقلب انتخاب‌گرها)