انتخابگرهای ویژگی
انتخابگرهای ویژگی در CSS
انتخابگرهای ویژگی (Attribute Selectors) یکی از قدرتمندترین ابزارها در CSS برای هدف‌گیری دقیق عناصر HTML بر اساس ویژگی‌هایشان هستند. این انتخابگرها به توسعه‌دهندگان اجازه می‌دهند عناصری را انتخاب کنند که دارای ویژگی‌های خاص یا مقادیر مشخصی برای آن ویژگی‌ها هستند.
نکته کلیدی: انتخابگرهای ویژگی به خصوص در کار با فرم‌ها، لینک‌ها و عناصر سفارشی بسیار مفید هستند.
انواع انتخابگرهای ویژگی
| نوع انتخابگر | توضیحات | مثال |
|---|---|---|
| [attribute] | انتخاب عناصری که ویژگی مشخص شده را دارند | a[target] |
| [attribute=value] | انتخاب عناصری که مقدار ویژگی دقیقاً برابر مقدار داده شده است | a[target="_blank"] |
| [attribute~=value] | انتخاب عناصری که مقدار ویژگی شامل کلمه داده شده باشد | img[title~="flower"] |
برای یادگیری عمیق‌تر درباره انتخابگرهای ویژگی و کاربردهای پیشرفته‌تر آنها، می‌توانید اینجا را مشاهده نمایید. این منبع به شما کمک می‌کند تا با مثال‌های عملی، تسلط بهتری بر این مبحث پیدا کنید.
کاربردهای عملی
- استایل‌دهی به لینک‌های خارجی با استفاده از a[href^="http://"]
- انتخاب فیلدهای فرم بر اساس نوع آنها: input[type="text"]
- هدف‌گیری تصاویر با پسوند خاص: img[src$=".png"]
- انتخاب عناصر با ویژگی‌های سفارشی داده-*
مثال کاربردی: برای تغییر رنگ تمام لینک‌هایی که به PDF ختم می‌شوند می‌توانید از کد زیر استفاده کنید:
a[href$=".pdf"] {
color: #e74c3c;
font-weight: bold;
}
نکات پیشرفته
- می‌توانید انتخابگرهای ویژگی را با سایر انتخابگرها ترکیب کنید (مثلاً div[class^="box-"]:hover)
- در CSS3 امکان جستجوی بخشی از مقادیر ویژگی با استفاده از * وجود دارد
- برای حساسیت به حروف بزرگ/کوچک می‌توانید از i قبل از پرانتز بسته استفاده کنید
انتخابگرهای ویژگی به شما این امکان را می‌دهند که بدون نیاز به اضافه کردن کلاس‌های متعدد، عناصر را با دقت بالایی انتخاب کنید. این ویژگی به خصوص در پروژه‌های بزرگ که نیاز به مدیریت پیچیده استایل‌ها دارید، بسیار ارزشمند است.