آموزش انتخابگر صفت در CSS

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش انتخابگر صفت در CSS با من همراه باشید.

آموزش انتخابگر صفت در CSS

Free-Learn

انتخابگر صفت در CSS

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

انتخابگر صفت دارای نوع های مختلفی می باشد که این نوع / روش ها به شرح زیر می باشد :

  • انتخاب مستقیم صفت یک تگ
  • انتخاب صفت با مقدار ( صفت را با مقدار مشخص شده انتخاب میکند )
  • انتخاب صفت با مقدار ( مقادیری که شامل یک کلمه خاص باشند، باید کلمه خودش تنها باشد و هیچگونه کلمه دیگری قبل یا بعدش بهش چسبیده نباشد )
  • انتخاب صفت با مقدار ( مقادیری که با یک کلمه خاصی شروع شوند، باید کلمه خودش تنها باشد یا از طریق خط پیوند (-) به کلمه دیگری چسبیده شده باشد )
  • انتخاب صفت با مقدار ( مقادیری که با یک کلمه خاصی شروع شوند، مهم نیست کلمه بعدش بهش چسبیده باشه یا نه )
  • انتخاب صفت با مقدار ( مقادیری که با یک کلمه خاصی به پایان برسند، مهم نیست به کلمه قبل یا بعدش چسبیده باشد یا حتی با کاراکترهای – یا _ از هم جدا شده باشند )
  • انتخاب صفت با مقدار ( همینکه خوده کلمه خاص ما داخل صفت باشه انتخابش میکنه و براش مهم نیست اول باشه یا آخر یا با استفاده از – یا _ به کلمه دیگری چسبیده باشه )

Free-Learn

مثال از این انتخابگر

در ادامه میتوانید یک مثال از این انتخابگر را در زبان CSS مشاهده نمایید.

مثال شماره ۱ : انتخاب مستقیم صفت یک تگ

امتحان کنید

مثال شماره ۲ : صفت را با مقدار مشخص شده انتخاب میکند

امتحان کنید

مثال شماره ۳ : مقادیری که شامل یک کلمه خاص باشند، باید کلمه خودش تنها باشد و هیچگونه کلمه دیگری قبل یا بعدش بهش چسبیده نباشد

امتحان کنید

مثال شماره ۴ : مقادیری که با یک کلمه خاصی شروع شوند، باید کلمه خودش تنها باشد یا از طریق خط پیوند (-) به کلمه دیگری چسبیده شده باشد

امتحان کنید

مثال شماره ۵ : مقادیری که با یک کلمه خاصی شروع شوند، مهم نیست کلمه بعدش بهش چسبیده باشه یا نه

امتحان کنید

مثال شماره ۶ : مقادیری که با یک کلمه خاصی به پایان برسند، مهم نیست به کلمه قبل یا بعدش چسبیده باشد یا حتی با کاراکترهای – یا _ از هم جدا شده باشند

امتحان کنید

مثال شماره ۷ : همینکه خوده کلمه خاص ما داخل صفت باشه انتخابش میکنه و براش مهم نیست اول باشه یا آخر یا با استفاده از – یا _ به کلمه دیگری چسبیده باشه

امتحان کنید

Free-Learn

پشتیبانی مرورگرها

در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از این انتخابگر در CSS پشتیبانی میکنند یا خیر.

  • برای استفاده و عمل کردن انتخابگرهای زیر در مرورگر اینترنت اکسپلورر از نسخه ۸ به پایین باید حتما DOCTYPE صفحه را تعریف کرده باشید.
نام انتخابگر Chrome Firefox Opera Safari IE
[attribute] ۴٫۰ ۲٫۰ ۹٫۶ ۳٫۱ ۷٫۰
نام انتخابگر Chrome Firefox Opera Safari IE
[attribute=value] ۴٫۰ ۲٫۰ ۹٫۶ ۳٫۱ ۷٫۰
نام انتخابگر Chrome Firefox Opera Safari IE
[attribute~=value] ۴٫۰ ۲٫۰ ۹٫۶ ۳٫۱ ۷٫۰
نام انتخابگر Chrome Firefox Opera Safari IE
[attribute|=value] ۴٫۰ ۲٫۰ ۹٫۶ ۳٫۱ ۷٫۰
نام انتخابگر Chrome Firefox Opera Safari IE
[attribute^=value] ۴٫۰ ۳٫۵ ۹٫۶ ۳٫۲ ۷٫۰
نام انتخابگر Chrome Firefox Opera Safari IE
[attribute$=value] ۴٫۰ ۳٫۵ ۹٫۶ ۳٫۲ ۷٫۰
نام انتخابگر Chrome Firefox Opera Safari IE
[attribute*=value] ۴٫۰ ۳٫۵ ۹٫۶ ۳٫۲ ۷٫۰

Free-Learn

نکات و توضیحات

نکته خاصی وجود ندارد، فقط همونطور که اشاره کردم برای استفاده کردن از این نوع انتخابگرها در مرورگر اینترنت اکسپلورر ( IE ) از نسخه ۸ به پایین باید حتما DOCTYPE صفحه را تعریف کرده باشید.

Free-Learn

دریافت PDF یا پرینت این مطلب