انواع Selectorها در CSS
در طراحی وب، Selectorها یکی از اساسی‌ترین مفاهیم در CSS هستند که به شما امکان می‌دهند عناصر خاصی از صفحه را انتخاب و استایل دهید. در این مقاله به بررسی انواع Selectorها و کاربردهای آن‌ها می‌پردازیم.
1. Selectorهای پایه
- Selector عنصر: مانند
p { color: red; }
- Selector کلاس: مانند
.menu { ... }
- Selector ID: مانند
#header { ... }
| نوع Selector |
مثال |
کاربرد |
| عنصر |
div |
انتخاب تمام divها |
| کلاس |
.active |
انتخاب عناصر با کلاس active |
نکته: Selectorهای ID باید منحصر به فرد باشند و برای انتخاب یک عنصر خاص استفاده شوند.
2. Selectorهای ترکیبی
این Selectorها امکان ترکیب چند شرط را فراهم می‌کنند:
- فرزند مستقیم:
div > p (انتخاب پاراگراف‌های مستقیم درون div)
- خواهر و برادر:
h1 + p (انتخاب پاراگراف بلافاصله بعد از h1)
- ویژگی:
a[target="_blank"]
3. Selectorهای شبه‌کلاس و شبه‌عنصر
این Selectorها برای انتخاب حالت‌های خاص عناصر استفاده می‌شوند:
- :hover - هنگام قرارگیری ماوس روی عنصر
- :nth-child() - انتخاب عناصر بر اساس موقعیت
- ::before - محتوای قبل از عنصر
استفاده صحیح از Selectorها می‌تواند به شما در ایجاد کدهای تمیزتر و کارآمدتر کمک کند. با تمرین و تجربه می‌توانید به مهارت بالایی در استفاده از این Selectorها دست یابید.
