انتخابگر در CSS: راهنمای جامع
انتخابگرها در CSS یکی از اساسی‌ترین مفاهیم برای طراحی وب هستند. این ابزارها به شما امکان می‌دهند عناصر خاصی از صفحه HTML را هدف قرار داده و استایل‌دهی کنید. در این مقاله به بررسی انواع انتخابگرها و کاربردهای آن‌ها می‌پردازیم.
انواع اصلی انتخابگرها
- انتخابگر تگ: با نام تگ HTML کار می‌کند (مثال: p, div, h1)
- انتخابگر کلاس: با ویژگی class عناصر کار می‌کند (مثال: .btn)
- انتخابگر ID: با ویژگی id عناصر کار می‌کند (مثال: #header)
- انتخابگر جهانی: تمام عناصر را انتخاب می‌کند (*)
| نوع انتخابگر |
مثال |
توضیح |
| تگ |
p { } |
تمام پاراگراف‌ها را انتخاب می‌کند |
| کلاس |
.warning { } |
تمام عناصر با کلاس warning را انتخاب می‌کند |
انتخابگرهای ترکیبی
CSS امکان ترکیب انتخابگرها را فراهم می‌کند تا دقت بیشتری در انتخاب عناصر داشته باشید:
- انتخابگر فرزند مستقیم (>) - فقط فرزندان مستقیم را انتخاب می‌کند
- انتخابگر فرزندان (فاصله) - تمام فرزندان را در هر سطحی انتخاب می‌کند
- انتخابگر هم‌سطح بعدی (+) - اولین عنصر هم‌سطح بعدی را انتخاب می‌کند
برای یادگیری عمیق‌تر درباره انتخابگرهای CSS، می‌توانید به انتخابگر وارد شوید.
انتخابگرهای شبه‌کلاس و شبه‌عنصر
این نوع انتخابگرها به شما امکان می‌دهند عناصر را در حالت‌های خاص یا بخش‌هایی از عناصر را انتخاب کنید:
مثال‌های شبه‌کلاس:
- :hover - وقتی موس روی عنصر است
- :nth-child() - عناصر با موقعیت خاص
مثال‌های شبه‌عنصر:
- ::before - محتوا قبل از عنصر
- ::first-letter - اولین حرف متن
در طراحی وب مدرن، تسلط بر انتخابگرهای CSS امری ضروری است. با ترکیب هوشمندانه این انتخابگرها می‌توانید طرح‌های پیچیده را با کدهای تمیز و بهینه پیاده‌سازی کنید.
