انتخابگرهای ویژگی (Attribute Selectors) در CSS به ما امکان می‌دهند که عناصر HTML را بر اساس مقدار یک ویژگی مشخص انتخاب و استایل‌دهی کنیم.

این انتخابگرها بسیار قدرتمند بوده و در مواردی مانند فرم‌ها، لینک‌ها، دکمه‌ها و استایل‌دهی به عناصر سفارشی کاربرد دارند.

۱. نحوه استفاده از انتخابگرهای Attribute در CSS

انتخابگرهای ویژگی را می‌توان به روش‌های مختلف برای انتخاب دقیق‌تر عناصر به کار برد. در ادامه، مهم‌ترین انواع این انتخابگرها را بررسی می‌کنیم.

✅ ۱. انتخاب عناصر دارای یک ویژگی مشخص

می‌توان عنصری را انتخاب کرد که دارای یک ویژگی خاص باشد، صرف نظر از مقدار آن.

مثال: تمام inputهایی که ویژگی type دارند را انتخاب می‌کند:

input[type] {
    border: 2px solid blue;
}

🔹 کاربرد: استایل‌دهی کلی به تمام فیلدهای ورودی (input) بدون توجه به نوع آن‌ها.

✅ ۲. انتخاب عناصری که مقدار ویژگی آن‌ها برابر یک مقدار خاص است (=)

این انتخابگر فقط عناصری را که مقدار ویژگی دقیقاً برابر مقدار داده‌شده است، انتخاب می‌کند.

مثال: فقط inputهایی که مقدار type="text" دارند را انتخاب می‌کند:

input[type="text"] {
    background-color: lightgray;
}

🔹 کاربرد: استایل‌دهی ویژه به فیلدهای ورودی متنی بدون تغییر در سایر انواع ورودی‌ها.

✅ ۳. انتخاب عناصری که مقدار ویژگی آن‌ها با مقدار خاصی شروع می‌شود (^=)

این انتخابگر عناصری را که مقدار ویژگی آن‌ها با مقدار مشخصی شروع می‌شود انتخاب می‌کند.

مثال: لینک‌هایی که آدرس آن‌ها با "https" شروع می‌شوند (یعنی لینک‌های امن):

a[href^="https"] {
    color: green;
    font-weight: bold;
}

🔹 کاربرد: استایل‌دهی لینک‌های خارجی که از HTTPS استفاده می‌کنند.

✅ ۴. انتخاب عناصری که مقدار ویژگی آن‌ها با مقدار خاصی پایان می‌یابد ($=)

این انتخابگر عناصری را که مقدار ویژگی آن‌ها با مقدار مشخصی پایان می‌یابد انتخاب می‌کند.

مثال: لینک‌هایی که به فایل‌های .pdf اشاره دارند:

a[href$=".pdf"] {
    color: red;
    font-weight: bold;
}

🔹 کاربرد: تغییر استایل لینک‌هایی که به فایل‌های PDF منتهی می‌شوند تا کاربران متوجه شوند که روی یک فایل قابل دانلود کلیک می‌کنند.

✅ ۵. انتخاب عناصری که مقدار ویژگی آن‌ها شامل یک مقدار خاص است (*=)

این انتخابگر عناصری را که مقدار ویژگی آن‌ها حاوی یک مقدار مشخص در هر جایی از مقدار ویژگی باشد، انتخاب می‌کند.

مثال: تمام لینک‌هایی که در هرجای آدرس خود "example" دارند:

a[href*="example"] {
    background-color: yellow;
}

🔹 کاربرد: استایل‌دهی به لینک‌هایی که به یک دامنه خاص اشاره دارند.

✅ ۶. انتخاب عناصری که مقدار ویژگی آن‌ها دقیقاً برابر مقدار مشخص یا شامل آن به عنوان یک مقدار جداگانه است (~=)

این انتخابگر عناصری را انتخاب می‌کند که مقدار ویژگی آن دقیقاً برابر مقدار مشخص شده باشد یا شامل آن باشد، اما تنها به‌عنوان یک مقدار جداگانه (با فاصله جدا شده باشد).

مثال: انتخاب عناصر div که کلاس "highlight" را به عنوان یک مقدار جداگانه دارند:

div[class~="highlight"] {
    border: 3px solid orange;
}

🔹 کاربرد: زمانی که یک ویژگی چندین مقدار دارد (مانند کلاس‌های چندگانه)، فقط مقدار خاصی را هدف قرار دهید.

✅ ۷. انتخاب عناصری که مقدار ویژگی آن‌ها با مقدار مشخصی شروع شده اما دقیقاً با آن برابر نیست (|=)

این انتخابگر عناصری را انتخاب می‌کند که مقدار ویژگی آن‌ها با مقدار مشخصی شروع می‌شود اما می‌تواند پس از آن یک خط فاصله (-) نیز داشته باشد.

مثال: انتخاب تمام زبان‌هایی که lang="en" دارند، اما lang="en-US" و lang="en-GB" را نیز شامل می‌شود:

p[lang|="en"] {
    font-style: italic;
}

🔹 کاربرد: هدف‌گیری زبان‌های خاص در صفحه برای استایل‌دهی متون بر اساس زبان.

۲. کاربردهای مهم انتخابگرهای Attribute در CSS

✅ ۱. استایل‌دهی به فیلدهای ورودی بر اساس نوع ورودی

input[type="password"] {
    background-color: lightyellow;
}

🔹 کاربرد: متمایز کردن فیلدهای پسورد از سایر فیلدهای ورودی.

✅ ۲. تغییر ظاهر لینک‌های خارجی

a[href^="http"] {
    color: blue;
    text-decoration: underline;
}

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

✅ ۳. استایل‌دهی دکمه‌ها بر اساس مقدار ویژگی data-*

button[data-theme="dark"] {
    background-color: black;
    color: white;
}

🔹 کاربرد: تنظیم استایل دکمه‌ها بر اساس حالت روشن/تاریک.

✅ ۴. نمایش آیکون کنار لینک‌هایی که به فایل‌های خاص اشاره دارند

a[href$=".pdf"]::after {
    content: "📄";
}

🔹 کاربرد: نمایش آیکون کنار لینک‌های دانلود PDF.

۳. نتیجه‌گیری

انتخابگرهای ویژگی (Attribute Selectors) در CSS ابزار قدرتمندی برای استایل‌دهی دقیق و داینامیک عناصر HTML هستند. با استفاده از این انتخابگرها می‌توان فیلدهای ورودی، لینک‌ها، دکمه‌ها و سایر عناصر را بر اساس مقادیر ویژگی‌هایشان هدف قرار داد و بدون نیاز به کلاس‌ها یا IDهای اضافی، کدهای CSS تمیزتر و انعطاف‌پذیرتری نوشت.