آموزش جامع انتخابگرها در CSS

🎯 اهداف یادگیری

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

📌 انتخابگرها چیستند؟

انتخابگرها (Selectors) در CSS الگوهایی هستند که برای انتخاب عناصر HTML جهت اعمال استایل استفاده می‌شوند:

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

انواع اصلی انتخابگرها:

• انتخابگرهای ساده: (عنصر، کلاس، شناسه) - برای انتخاب مستقیم عناصر
• انتخابگرهای ترکیبی: ترکیب چند انتخابگر برای انتخاب دقیق‌تر
• انتخابگرهای شبه‌کلاس: برای انتخاب عناصر در حالت‌های خاص
• انتخابگرهای شبه‌عنصر: برای استایل‌دهی به بخش‌هایی از عناصر

📌 انتخابگرهای ساده

این انتخابگرها پایه‌ای‌ترین نوع سلکتورها هستند:

/* انتخابگر عنصر */
p {
  color: red;
}
/* انتخابگر کلاس */
.warning {
  background-color: yellow;
}
/* انتخابگر شناسه */
#header {
  border: 1px solid black;
}

ویژگی‌های انتخابگرهای ساده:

• انتخابگر عنصر: تمام عناصر از یک نوع را انتخاب می‌کند (مثل p, div, h1)
• انتخابگر کلاس: عناصری با کلاس مشخص را انتخاب می‌کند (با نقطه شروع می‌شود)
• انتخابگر شناسه: عنصر با شناسه منحصر به فرد را انتخاب می‌کند (با # شروع می‌شود)

📌 انتخابگرهای ترکیبی

این انتخابگرها امکان ترکیب چند شرط برای انتخاب دقیق‌تر عناصر را فراهم می‌کنند:

/* انتخابگر فرزند مستقیم */
div > p {
  color: green;
}
/* انتخابگر فرزندان (مستقیم و غیرمستقیم) */
div p {
  font-size: 1.2rem;
}
/* انتخابگر چند عنصر */
h1, h2, h3 {
  font-family: 'Arial', sans-serif;
}

انواع انتخابگرهای ترکیبی:

• فرزند مستقیم (A > B): فقط عناصر B که فرزند مستقیم A هستند
• فرزندان (A B): تمام عناصر B که درون A هستند (مستقیم یا غیرمستقیم)
• خواهر و برادر مجاور (A + B): عنصر B که بلافاصله بعد از A آمده باشد
• خواهر و برادر عمومی (A ~ B): تمام عناصر B که بعد از A آمده باشند

📌 انتخابگرهای شبه‌کلاس (Pseudo-classes)

شبه‌کلاس‌ها برای انتخاب عناصر در حالت‌های خاص استفاده می‌شوند:

/* لینک‌های بازدید نشده */
a:link {
  color: blue;
}
/* لینک‌های بازدید شده */
a:visited {
  color: purple;
}
/* هاور روی عنصر */
button:hover {
  background-color: #eee;
}
/* عنصر فعال (مثل کلیک روی دکمه) */
button:active {
  transform: scale(0.98);
}

شبه‌کلاس‌های پرکاربرد:

• :hover - وقتی موس روی عنصر است
• :active - وقتی عنصر فعال است (مثل کلیک)
• :focus - وقتی عنصر فوکوس شده (مثل input)
• :nth-child() - انتخاب عناصر بر اساس موقعیت
• :first-child - اولین فرزند والد
• :last-child - آخرین فرزند والد

📌 انتخابگرهای شبه‌عنصر (Pseudo-elements)

برای استایل‌دهی به بخش‌های خاصی از عناصر استفاده می‌شوند:

/* اولین خط پاراگراف */
p::first-line {
  font-weight: bold;
}
/* اولین حرف پاراگراف */
p::first-letter {
  font-size: 2em;
  color: red;
}
/* محتوای قبل از عنصر */
.warning::before {
  content: "⚠️ ";
}
/* محتوای بعد از عنصر */
.price::after {
  content: " تومان";
}

شبه‌عنصرهای پرکاربرد:

• ::before - درج محتوا قبل از عنصر
• ::after - درج محتوا بعد از عنصر
• ::first-line - اولین خط متن
• ::first-letter - اولین حرف متن
• ::selection - متن انتخاب شده توسط کاربر

📌 اولویت انتخابگرها (Specificity)

وقتی چند قانون CSS برای یک عنصر وجود دارد، مرورگر از قاعده Specificity برای تعیین قانون قابل اجرا استفاده می‌کند:

📌 تمرین عملی

کد CSS زیر را کامل کنید تا موارد خواسته شده را پیاده‌سازی کند:

/* تمام لینک‌های منو را آبی کنید */
.menu a {
  color: blue;
}
/* وقتی روی لینک‌ها هاور می‌شود رنگ آنها قرمز شود */
/* کد شما */
/* اولین آیتم منو را پررنگ کنید */
/* کد شما */
/* بعد از هر لینک در منو یک خط عمودی اضافه کنید */
/* کد شما */

راهنمای تمرین:

1. برای هاور از شبه‌کلاس :hover استفاده کنید
2. برای انتخاب اولین آیتم از :first-child استفاده کنید
3. برای اضافه کردن خط عمودی از ::after و border-right استفاده کنید

📌 نکات پیشرفته

برخی از تکنیک‌های پیشرفته در استفاده از انتخابگرها:

1. انتخابگرهای attribute

/* تمام inputهای نوع text */
input[type="text"] {
  border: 1px solid #ccc;
}
/* تمام لینک‌هایی که با https شروع می‌شوند */
a[href^="https"] {
  background: url('lock-icon.png') no-repeat right;
}

📌 قدم بعدی

در درس بعدی با مدل جعبه‌ای آشنا خواهیم شد!