این آموزش در تاریخ ۱۴۰۰/۱۰/۱۵ آپدیت شده است.
آموزش انتخابگر صفت در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش انتخابگر صفت در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
- 1 انتخابگر صفت در CSS
- 2 انتخاب مستقیم صفت
- 3 انتخاب مستقیم مقدار صفت
- 4 انتخاب کن صفاتی که شامل حداقل یک کلمه مورد نظر ما باشد
- 5 انتخاب کن صفاتی که از یک کلمه خاص شروع می شوند
- 6 انتخاب کن صفاتی که از یک کلمه خاص شروع می شوند
- 7 انتخاب کن صفاتی که با کلمه خاصی به پایان می رسند
- 8 انتخاب کن صفاتی که شامل کلمه مورد نظر ما باشد
- 9 پشتیبانی مرورگرها
- 10 نکات و توضیحات
انتخابگر صفت در CSS
همونطور که از اسم این نوع انتخابگر مشخصه ، با استفاده از آن میتوان تگ هارو از طریق صفت هاشون انتخاب و سپس با استفاده از CSS بروی این تگ ها استایل تعریف کنیم.
انتخابگر صفت دارای نوع های مختلفی می باشند :
- انتخاب مستقیم صفت
- انتخاب مستقیم مقدار صفت
- انتخاب کن صفاتی که شامل حداقل یک کلمه مورد نظر ما باشد
- انتخاب کن صفاتی که از یک کلمه خاص شروع می شوند
- انتخاب کن صفاتی که از یک کلمه خاص شروع می شوند ( مهم نیست کلمه چسبیده باشه یا نه )
- انتخاب کن صفاتی که با کلمه خاصی به پایان می رسند
- انتخاب کن صفاتی که شامل کلمه مورد نظر ما باشد
Free-Learn
انتخاب مستقیم صفت
تو این روش میاد و صفت یک تگ رو انتخاب میکنه بدون اینکه براش مهم باشه مقدار اون صفت چیه، یعنی همینکه نام صفت باشه دیگه انتخابش میکنه.
شکل کلی :
|
1 |
Tag_name [attribute_name] { ... } |
مثال :
|
1 2 3 4 5 6 7 |
<style> p[title] { background-color:yellow; } </style> |
Free-Learn
انتخاب مستقیم مقدار صفت
تو این حالت میتونیم یک صفت رو با یک مقدار مشخص انتخاب کنیم، مثلا میگیم صفت title هایی که مقدارشون برابر است با free-learn نه کمتر نه بیشتر
شکل کلی :
|
1 |
Tag_name [attribute_name = "Value"] { ... } |
مثال :
|
1 2 3 4 5 6 7 |
<style> p[title="free-learn"] { background-color:yellow; } </style> |
Free-Learn
انتخاب کن صفاتی که شامل حداقل یک کلمه مورد نظر ما باشد
در این روش مثلا من میگم انتخاب کن تمامی تگ های P رو که در صفت title شون کلمه free وجود داشت، اینم میره و تمامی تگ های P رو پیدا میکنه و نگا به صفت title شون میکنه اگه کلمه free داخلش بود انتخابش میکنه.
- اگه کلمه به کلمه دیگری چسبیده باشه انتخاب نمیشه
- اگه بین کلمات – یا _ باشه بازم انتخاب نمیشه
شکل کلی :
|
1 |
Tag_name [attribute_name~="value"] { ... } |
نکته : کلمه ی مورد نظر ما اگه به کلمه ی دیگری چسبیده باشد انتخاب نمی شود.
مثال : تگ های P که داخل صفت title شون کلمه free باشه رو انتخاب میکنه
|
1 2 3 4 5 6 7 |
<style> p[title~="free"]{ background-color:yellow; } </style> |
Free-Learn
انتخاب کن صفاتی که از یک کلمه خاص شروع می شوند
در این روش داره میگه انتخاب کن تمامی صفاتی را که با کلمه مورد نظر من شروع می شوند، در این روش باید کلمه مورد نظر ما با کاراکتر – از دیگر کلمات جدا شده باشه تا بتونه انتخاب شه.
- اگه کلمه به کلمه دیگری چسبیده باشه انتخاب نمیشه
- اگه بین کلمات _ باشه انتخاب نمیشه
- اگه بین کلمات فاصله باشه انتخاب نمیشه
شکل کلی :
|
1 |
Tag_name [attribute|="value"] { ... } |
مثال :
|
1 2 3 4 5 6 7 |
<style> p[title|="free"]{ background-color:yellow; } </style> |
Free-Learn
انتخاب کن صفاتی که از یک کلمه خاص شروع می شوند
این روش همانند روش بالاست فقط با این تفاوت که دیگه براش مهم نیست کلمه خاص ما به دیگر کلمات چسبیده باشد یا نه، در هر صورت انتخابش میکنه.
- اگه کلمه به کلمه دیگری چسبیده باشه انتخاب میشه
- اگه بین کلمات – یا _ باشه انتخاب میشه
- اگه بین کلمات فاصله باشه انتخاب میشه
شکل کلی :
|
1 |
Tag_name [attribute^="value"] { ... } |
مثال :
|
1 2 3 4 5 6 7 |
<style> p[title^="free"]{ background-color:yellow; } </style> |
Free-Learn
انتخاب کن صفاتی که با کلمه خاصی به پایان می رسند
این انتخابگر صفاتی رو انتخاب میکنه با یک کلمه خاص مورد نظر ما به پایان می رسند ، براش مهم نیست که کلمه قبلش بهش چسبیده باشه یا نه ! حتی مهم نیست که کلمه قبلش با کاراکترهای – یا _ به کلمه خاص ما چسبیده باشد.
- اگه کلمه به کلمه دیگری چسبیده باشه انتخاب میشه
- اگه بین کلمات – یا _ باشه انتخاب میشه
- اگه بین کلمات فاصله باشه انتخاب میشه
شکل کلی :
|
1 |
Tag_name [attribute$="value"] { ... } |
مثال :
|
1 2 3 4 5 6 7 |
<style> p[title$="learn"]{ background-color:yellow; } </style> |
Free-Learn
انتخاب کن صفاتی که شامل کلمه مورد نظر ما باشد
در این روش دیگه هیچی مهم نیست براش ، مهم فقط اینه که کلمه مورد نظر ما درون صفت وجود داشته باشد، یعنی مهم نیست اولش باشد یا آخرش، مهم نیست چسبیده باشد یا نه مهم فقط بودنش تو صفت هست.
- اگه کلمه به کلمه دیگری چسبیده باشه انتخاب میشه
- اگه بین کلمات – یا _ باشه انتخاب میشه
- اگه بین کلمات فاصله باشه انتخاب میشه
- اگه کلمه اول متن باشه انتخاب میشه
- اگه کلمه آخر متن باشه انتخاب میشه
شکل کلی :
|
1 |
Tag_name [attribute*="value"] { ... } |
مثال :
|
1 2 3 4 5 6 7 |
<style> p[title*="free"]{ background-color:yellow; } </style> |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این انتخابگر در CSS پشتیبانی میکنند یا خیر.
| نام انتخابگر | Chrome | Firefox | Opera | Safari | Edge |
| [attribute] | بله | بله | بله | بله | بله |
Free-Learn
نکات و توضیحات
- در مثال های بالا من روی صفت title از تگ P کار کردم ولی خب شما میتونی رو هرتگی و هرصفتی اینکارارو انجام بدید.
