انتخابگرها (Selectors) در CSS ابزارهایی هستن که به ما اجازه میدن مشخص کنیم کدهای استایل روی کدوم عناصر HTML اعمال بشن. بدون انتخابگرها، CSS نمیتونه بفهمه باید کدها رو روی چه بخشهایی از صفحه اجرا کنه. در این درس سه نوع اصلی و پرکاربرد انتخابگر رو بررسی میکنیم.
🟢 انتخابگر نوعی (Type Selector)
این سادهترین نوع انتخابگره. فقط اسم تگ رو مینویسیم و همهی اون عناصر در صفحه هدف قرار میگیرن.
مثال:
p {
color: green;
}
این کد همهی پاراگرافها (<p>) رو سبز میکنه.
🔵 انتخابگر نسبتی یا تو در تو (Descendant Selector)
وقتی بخوایم فقط عناصر خاصی رو که داخل یک بخش مشخص هستن هدف بگیریم، از انتخابگر نسبتی استفاده میکنیم.
مثال:
header p {
color: green;
}
فقط پاراگرافهای داخل <header> سبز میشن.
یک نمونه عمیقتر:
header p span {
color: blue;
}
اینجا فقط <span>هایی که داخل <p> و اون هم داخل <header> هستن آبی میشن.
🟣 انتخابگر کلاس (Class Selector)
وقتی بخوایم یک عنصر خاص رو جدا از بقیه هدف بگیریم، کلاسها بهترین راه هستن.
مثال:
<p class="highlight">دومین پاراگراف</p>
.highlight {
background-color: yellow;
}
فقط پاراگرافی که کلاس highlight داره پسزمینه زرد میگیره.
استفاده پیشرفتهتر:
میتونیم کلاسها رو با انتخابگر نسبتی ترکیب کنیم:
main .highlight {
background-color: yellow;
}
footer .highlight {
background-color: lightgray;
}
اینجا هر عنصر با کلاس highlight داخل <main> زرد میشه، ولی همون کلاس داخل <footer> خاکستری روشن خواهد بود.
📚 جمعبندی
- Type Selector: همه عناصر از یک نوع رو هدف میگیره.
- Descendant Selector: عناصر خاص داخل یک ساختار تو در تو رو انتخاب میکنه.
- Class Selector: به عناصر خاص ویژگی جداگانه میده و قابل استفاده مجدد هست.
💡 این تازه شروع کاره! انتخابگرهای CSS خیلی متنوعتر هستن و در ادامه دوره با انتخابگرهای پیشرفتهتر مثل ID، pseudo-class و attribute selectors آشنا میشیم.