سلکتور خصوصیت در CSS

سلکتور خصوصیت (یا Attribute Selector) یکی از انواع سلکتورها در CSS است که المان ها را براساس وجود یک خصوصیت مشخص یا براساس مقدار یک خصوصیت انتخاب می‌کند. به عبارت بهتر این سلکتورها اجازه می‌دهند المان‌هایی را هدف تعیین استایل قرار دهید که دارای یک خصوصیت مشخص یا مقداری خاص برای آن خصوصیت هستند.

بیشتر بخوانید: آشنایی با سلکتورها و انواع آن‌ها در CSS

شیوه استفاده از سلکتور خصوصیت در CSS

یکی از رایج‌ترین سلکتورهای خصوصیت در قالب [attribute] درج می‌شود. از این سلکتور برای انتخاب المان هایی استفاده می‌شود که دارای خصوصیت مشخص attribute هستند. به عنوان نمونه در مثال زیر، سلکتور a[target] تمام المان های a یا لینک هایی را انتخاب می‌کند که در تگ شروع آن‌ها خصوصیت target وجود دارد.

a[target] {
  color: red;
}

حال فرض کنید داخل یک صفحه وب، سه المان <a> مشابه با نمونه زیر وجود دارد.

<a href="https://example.com/1" target="_blank">Page 1</a><br>
<a href="https://example.com/2">Page 2</a><br>
<a href="https://example.com/3" target="_self">Page 3</a>

در این حالت با توجه به قانون CSS قبل، از آنجایی که لینک دوم فاقد خصوصیت target است تنها متن لینک های اول و سوم قرمز خواهد شد:

سلکتور [attribute=”value”] نیز المان‌هایی با مقدار مشخص value برای خصوصیت attribute را انتخاب می‌کند. به عنوان نمونه در مثال زیر، سلکتور a[href=”https://example.com”] تمام المان‌های a یا لینک‌هایی را انتخاب می‌کند که دارای مقدار “https://example.com” برای خصوصیت href هستند.

a[href="https://example.com"] {
  ...
}

همانطور که در مثال‌های فوق مشاهده کردید در این نوع گزینشگرها نام ویژگی (و مقدار آن در صورت نیاز) داخل [   ] قرار می‌گیرد.

سلکتورهای خصوصیت متداول در CSS

در جدول زیر فهرستی از رایج‌ترین سلکتورهای خصوصیت در سی‌اس‌اس را همراه با مثال و مفهوم آن مشاهده می‌کنید.

سلکتور	مثال	توضیح مثال
[attribute]	[target]	تمام المان‌هایی را انتخاب می‌کند که دارای خصوصیت target هستند.
[attribute=value]	[target=”_blank”]	تمام المان‌هایی را انتخاب می‌کند که در آن‌ها target=”_blank” است.
[attribute~=value]	[title~=product]	تمام المان‌هایی را انتخاب می‌کند که در آن‌ها مقدار خصوصیت title شامل واژه product است. (در این حالت، ممکن است واژه product در کنار سایر واژه‌های احتمالی که با فاصله از یکدیگر جدا شده‌اند قرار داشته باشد).
[attribute|=value]	[lang|=fa]	تمام المان‌هایی را انتخاب می‌کند که در آن‌ها مقدار خصوصیت lang مساوی با fa است یا با fa شروع می‌شود و پس از آن کاراکتر – درج شده است.
[attribute^=value]	a[href^=”https”]	تمام المان‌های a را انتخاب می‌کند که در آن‌ها مقدار خصوصیت href با https شروع می‌شود.
[attribute$=value]	a[href$=”.com”]	تمام المان‌های a را انتخاب می‌کند که در آن‌ها مقدار خصوصیت href به .com ختم می‌شود.
[attribute*=value]	[title*=product]	تمام المان‌هایی را انتخاب می‌کند که در آن‌ها مقدار خصوصیت title شامل رشته product است.

جزئیات بیشتر در مورد سلکتورهای خصوصیت فوق را در قسمت‌های مجزا خواهید آموخت.

بازگشت به فهرست مجموعه آموزشی CSS