Attribute Selector

انتخاب عناصر بر اساس ویژگی‌هایشان: Attribute Selector

تا اینجا با Selectorهایی آشنا شدیم که بر اساس نام تگ، کلاس یا id عمل می‌کردن. اما گاهی نیاز داریم عناصر رو بر اساس یک ویژگی (Attribute) خاص یا حتی مقدار دقیق اون ویژگی انتخاب کنیم. اینجاست که Attribute Selector وارد کار می‌شه.

Attribute Selector چیست؟

Attribute Selector عناصری رو انتخاب می‌کنه که یک ویژگی HTML مشخص داشته باشن، با یا بدون شرط روی مقدار اون ویژگی. این Selector همیشه داخل علامت کروشه ([ ]) نوشته می‌شه.

ساده‌ترین حالت: وجود یک ویژگی

[disabled] {
  opacity: 0.5;
}

<input type="text" disabled>
<input type="text">

در این مثال، Selector [disabled] فقط اولین input رو انتخاب می‌کنه؛ چون فقط اون یکی ویژگی disabled رو داره، صرف‌نظر از اینکه این ویژگی چه مقداری داره یا حتی مقداری نداره.

انتخاب بر اساس تگ به‌همراه ویژگی

می‌شه Attribute Selector رو با Type Selector ترکیب کرد تا دقت انتخاب بیشتر بشه:

input[required] {
  border-color: red;
}

این Selector فقط تگ‌های inputای رو انتخاب می‌کنه که ویژگی required داشته باشن؛ نه هر عنصری با این ویژگی.

تطابق با مقدار دقیق ویژگی

input[type="email"] {
  background-color: #f0f8ff;
}

<input type="email">
<input type="text">

در این مثال، فقط inputای که مقدار type‌ش دقیقاً برابر "email" است انتخاب می‌شه. input دوم که type="text" داره، انتخاب نمی‌شه.

عملگرهای تطابق جزئی روی مقدار

Attribute Selector فقط به تطابق دقیق محدود نمی‌شه؛ چند عملگر خاص هم وجود داره که امکان تطابق جزئی رو فراهم می‌کنن:

Syntax	شرط تطابق
[attr^="value"]	مقدار ویژگی با value شروع شود
[attr$="value"]	مقدار ویژگی با value پایان یابد
[attr*="value"]	مقدار ویژگی در هر جایی شامل value باشد
[attr~="value"]	value به‌عنوان یکی از کلمات مجزا (با فاصله) در مقدار ویژگی وجود داشته باشد
[attr|="value"]	مقدار ویژگی دقیقاً value باشد، یا با "value-" شروع شود

مثال: [attr^="value"]

a[href^="https"] {
  color: green;
}

<a href="https://example.com">لینک امن</a>
<a href="http://example.com">لینک غیرامن</a>

فقط لینک اول، که مقدار href‌ش با https شروع می‌شه، رنگ سبز می‌گیره.

مثال: [attr$="value"]

a[href$=".pdf"] {
  background: url("pdf-icon.png") no-repeat left center;
  padding-right: 20px;
}

این Selector تمام لینک‌هایی رو پیدا می‌کنه که آدرس‌شون به .pdf ختم می‌شه؛ کاربرد رایجی برای نمایش آیکون کنار لینک فایل‌های PDF.

مثال: [attr*="value"]

[class*="btn-"] {
  border-radius: 4px;
}

<button class="btn-primary">تایید</button>
<button class="btn-danger">حذف</button>

این Selector هر دو دکمه رو انتخاب می‌کنه، چون هر دو مقدار class‌شون جایی شامل رشته btn- است.

مثال: [attr~="value"]

[class~="featured"] {
  border: 2px solid gold;
}

<div class="card featured">کارت ویژه</div>
<div class="card-featured">این انتخاب نمی‌شود</div>

در این مثال، فقط div اول انتخاب می‌شه؛ چون featured باید به‌عنوان یک کلمه کاملاً مجزا (جدا شده با فاصله) داخل مقدار class وجود داشته باشه. div دوم که class="card-featured" داره (بدون فاصله)، تطابق پیدا نمی‌کنه.

Case Sensitivity در مقدار ویژگی

به‌طور پیش‌فرض، تطابق مقدار در Attribute Selector به بزرگی و کوچکی حروف (Case) حساسه. می‌شه با اضافه کردن i قبل از بسته شدن کروشه، این حساسیت رو غیرفعال کرد:

a[href$=".PDF" i] {
  color: crimson;
}

این Selector هم .PDF و هم .pdf و حتی .Pdf رو تطابق می‌ده، چون i باعث نادیده گرفتن تفاوت حروف بزرگ و کوچک می‌شه.

کاربردهای رایج Attribute Selector

• استایل‌دهی به فرم‌ها بر اساس نوع input (مثل input[type="checkbox"])
• نشانه‌گذاری بصری لینک‌های خارجی یا لینک به فایل‌های خاص
• استایل‌دهی بر اساس حالت‌های خاص فرم مثل required، disabled، readonly
• هدف قرار دادن عناصر بر اساس بخشی از نام کلاس، بدون نیاز به یک Class Selector جداگانه

نکات مهم

• Attribute Selector می‌تونه هم برای بررسی وجود یک ویژگی و هم برای بررسی مقدار دقیق یا جزئی اون استفاده بشه.
• عملگرهای ^، $، *، ~ و | هرکدوم شرط تطابق متفاوتی دارن که نباید با هم اشتباه گرفته بشن.
• افزودن i باعث نادیده گرفتن حساسیت به حروف بزرگ و کوچک در مقدار ویژگی می‌شه.

اشتباهات رایج

• قاطی کردن [attr*="value"] با [attr~="value"]؛ اولی هر جایی از مقدار رو بررسی می‌کنه، دومی فقط کلمات کاملاً مجزا رو.
• فراموش کردن گیومه دور مقدار در برخی موارد؛ هرچند در اکثر مرورگرهای مدرن حذف گیومه هم کار می‌کنه، ولی استفاده از گیومه همیشه توصیه می‌شه.
• تصور اینکه Attribute Selector فقط برای ویژگی class یا id قابل استفاده‌ست؛ در حالی که روی هر ویژگی HTML دلخواه قابل اجراست.

جمع‌بندی

Attribute Selector امکان انتخاب عناصر بر اساس وجود یک ویژگی یا تطابق دقیق و جزئی با مقدار اون ویژگی رو فراهم می‌کنه. عملگرهایی مثل ^، $، *، ~ و | هرکدوم نوع خاصی از تطابق رو تعریف می‌کنن، و افزودن i امکان نادیده گرفتن حساسیت به حروف بزرگ و کوچک رو می‌ده. این Selector ابزاری بسیار انعطاف‌پذیر برای هدف‌گیری دقیق عناصر، به‌خصوص در فرم‌ها و لینک‌ها، محسوب می‌شه.