Attribute Selectors

در CSS می‌تونیم المنت‌ها رو بر اساس اتریبیوت‌ها (attribute) انتخاب کنیم.
یعنی به جای اینکه فقط از کلاس یا آیدی استفاده کنیم، مستقیماً بگیم:

"همه المنت‌هایی که یک ویژگی خاص دارن رو انتخاب کن!"

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

📌 انواع Attribute Selectors در CSS

1. [attribute]

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

a[target] { color: red; }

🔹 همه لینک‌هایی که ویژگی target دارن قرمز میشن.

2. [attribute="value"]

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

a[target="_blank"] { color: green; }

🔹 فقط لینک‌هایی که target="_blank" هستن سبز میشن.

3. [attribute~="value"]

انتخاب عناصری که مقدار اتریبیوت شامل یک کلمه مشخص باشه.

[title~="css"] { background: yellow; }

🔹 هر عنصری که title="learn css tutorial" داشته باشه انتخاب میشه (چون شامل کلمه css هست).

4. [attribute|="value"]

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

[lang|="en"] { color: blue; }

🔹 المان‌هایی با lang="en" یا lang="en-US" انتخاب میشن.

5. [attribute^="value"]

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

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

🔹 همه لینک‌هایی که با https شروع میشن نارنجی میشن.

6. [attribute$="value"]

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

a[href$=".pdf"] { color: red; }

🔹 همه لینک‌هایی که به .pdf ختم میشن قرمز میشن.

7. [attribute*="value"]

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

a[href*="google"] { background: lightgreen; }

🔹 همه لینک‌هایی که آدرسشون شامل google هست انتخاب میشن.

✅ مثال عملی (HTML + CSS)

<!DOCTYPE html> <html lang="fa"> <head> <meta charset="UTF-8"> <title>CSS Attribute Selectors</title> <style> a[target] { color: red; } a[target="_blank"] { font-weight: bold; } [title~="css"] { background: yellow; } [href^="https"] { border: 1px solid green; } [href$=".pdf"] { color: purple; } [href*="google"] { background: lightblue; } </style> </head> <body> <h2>CSS Attribute Selectors Example</h2> <a href="https://google.com" target="_blank">Google</a><br> <a href="http://example.com" target="_self">Example</a><br> <a href="file.pdf" title="css guide">Download PDF</a><br> <a href="https://mysite.com/page">My Site</a> </body> </html>

🔥 اینجوری می‌تونی خیلی سریع و تمیز، استایل‌های خاص بر اساس ویژگی المنت‌ها بذاری.