فصل سوم: سلکتورها (Selectors) در CSS

در این فصل یاد می‌گیریم که چطور با استفاده از سلکتورها به عناصر مختلف HTML استایل بدهیم. سلکتور قلب CSS هست و باهاش تعیین می‌کنیم کد CSS روی کدوم عنصر اجرا بشه.

---

۱. سلکتور تگ (Tag Selector)

خیلی ساده، با نام تگ به همه عناصر هم‌نام استایل می‌دیم:

p {
  color: blue;
}

تمام <p>ها آبی میشن.

---

۲. سلکتور کلاس (Class Selector)

برای انتخاب یه گروه خاص از المان‌ها استفاده میشه، با نقطه (.) قبل از اسم کلاس.

.my-style {
  font-weight: bold;
}

در HTML:

<p class="my-style">متن ضخیم</p>

---

۳. سلکتور آی‌دی (ID Selector)

برای هدف قرار دادن یک عنصر خاص، با شارپ (#) استفاده میشه:

#unique-title {
  color: red;
}

در HTML:

<h1 id="unique-title">یک عنوان خاص</h1>

---

۴. سلکتورهای ترکیبی و پیشرفته

مثلاً فقط لینک‌های داخل پاراگراف:

p a {
  text-decoration: underline;
}

یا انتخاب‌های چندگانه:

h1, h2, h3 {
  font-family: Tahoma;
}

---

تمرین فصل سوم:

یک فایل HTML بسازید و:

1. به تگ‌های p رنگ بدهید.
2. یک کلاس بسازید و به چند عنصر مختلف بدهید (مثلاً هم به p هم به h2).
3. به یک آی‌دی خاص استایل بدهید.
4. سعی کنید با انتخاب‌های ترکیبی کار کنید (مثلاً فقط لیست‌های درون یک div خاص استایل بگیرند).

---

نکات سریع:

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