Attribute Selectors
در CSS میتونیم المنتها رو بر اساس اتریبیوتها (attribute) انتخاب کنیم.
یعنی به جای اینکه فقط از کلاس یا آیدی استفاده کنیم، مستقیماً بگیم:
"همه المنتهایی که یک ویژگی خاص دارن رو انتخاب کن!"
این خیلی کاربردی میشه وقتی بخوایم استایل خاصی رو روی لینکها، فرمها یا هر المنتی بر اساس ویژگی HTML اون اعمال کنیم.
📌 انواع Attribute Selectors در CSS
1. [attribute]
انتخاب همه عناصری که اون ویژگی رو داشته باشن.
🔹 همه لینکهایی که ویژگی target
دارن قرمز میشن.
2. [attribute="value"]
انتخاب عناصری که ویژگی دقیقاً مساوی مقدار خاصی باشه.
🔹 فقط لینکهایی که target="_blank"
هستن سبز میشن.
3. [attribute~="value"]
انتخاب عناصری که مقدار اتریبیوت شامل یک کلمه مشخص باشه.
🔹 هر عنصری که title="learn css tutorial"
داشته باشه انتخاب میشه (چون شامل کلمه css
هست).
4. [attribute|="value"]
انتخاب عناصری که مقدار ویژگی با کلمه مشخص شروع بشه یا با خط فاصله -
ادامه پیدا کنه.
🔹 المانهایی با lang="en"
یا lang="en-US"
انتخاب میشن.
5. [attribute^="value"]
انتخاب عناصری که مقدار ویژگی با یک متن خاص شروع بشه.
🔹 همه لینکهایی که با https
شروع میشن نارنجی میشن.
6. [attribute$="value"]
انتخاب عناصری که مقدار ویژگی با یک متن خاص پایان پیدا کنه.
🔹 همه لینکهایی که به .pdf
ختم میشن قرمز میشن.
7. [attribute*="value"]
انتخاب عناصری که مقدار ویژگی شامل یک متن خاص باشه.
🔹 همه لینکهایی که آدرسشون شامل google
هست انتخاب میشن.
✅ مثال عملی (HTML + CSS)
🔥 اینجوری میتونی خیلی سریع و تمیز، استایلهای خاص بر اساس ویژگی المنتها بذاری.