دوره های آموزشی آکادمی پی وی لرن (پروژه محور و ویژه بازار کار)



  • ۱
  • آبان

جلسه ۳۳ : انتخابگرهای صفت در CSS

  • دسته‌بندی‌ها :
جلسه ۳۳ : انتخابگرهای صفت در CSS
    • جزئیات
    • نوع محتواآموزش تصویری

      مقدمه

      با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش CSS را دنبال می کنند. در بخش های قبلی شما را با انتخابگرهای عنصر و کلاس آشنا کردیم و چگونگی دسترسی به عناصر هم جوار ، فرزند و هم سطح را بررسی کردیم، همچنین دسترسی به رویدادها و وضعیت های مختلف عناصر در CSS و تعریف style برای آن ها را نیز ارائه کردیم. دسته ای دیگر از انتخابگرها هستند که به شما اجازه ی دسترسی به عناصر از طریق صفات آن ها را می دهند، که به عنوان Attribute Selectors در CSS و یا به زبان ساده تر انتخابگرهای صفت در CSS شناخته می شوند. در این آموزش ما به شما چگونگی استفاده از انتخابگرهای صفت در CSS برای دسترسی به عنصر مختلف از طریق صفات آن ها را بررسی کرده ایم.

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

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

      ساختار کار با Attribute Selectors در CSS

      انتخابگر [attribute] برای انتخاب انواع عناصر HTML با استفاده از صفات آن ها بکار می رود.

      مثال زیر تمام عناصر <a> را با یک صفت target انتخاب می کند:

      مثال : انتخابگر صفت
      خودتان امتحان کنید »

      انتخابگر [“attribute=”value]

      انتخابگر [attribute="value"] عناصر HTML را با استفاده از یک صفت و مقدار مشخص آن، انتخاب می کند.

      مثال زیر تمام عناصر <a> را با صفت  target="_blank" انتخاب می کند:

      مثال :  سینتکس انتخابگر=
      خودتان امتحان کنید »

      انتخابگر [“attribute~=”value]

      انتخابگر [attribute~="value"] یک عنصر HTML را که شامل مقدار صفت انتخابگر باشند را انتخاب می کند.

      مثال زیر border تمام عناصری که title آنها شامل کلمه  “flower” باشند را با ضخامت ۵px و رنگ زرد مشخص می کند:

      مثال : انتخابگر ~=
      خودتان امتحان کنید »

      انتخابگر [“attribute|=”value]

      انتخابگر [attribute|="value"] برای انتخاب عناصری استفاده می شود که اول مقدار صفت مشخص شده در آن ها با مقدار صفت انتخابگر برابر باشد.

      مثال زیر تمام عناصری را انتخاب می کند که ابتدای صفت class آن ها با مقدار “top” برابر باشد.

      نکته : حتما باید صفت مشخص شده در عناصر شامل تمام مقدار مشخص شده ( “top”) باشد و اینکه شامل یک حرف از آن بوده یا چسبیده به مقدار دیگری باشد کافی نیست.

      مثال : انتخابگر |=
      خودتان امتحان کنید »

      انتخابگر [attribute^=”value”]

      انتخابگر [attribute^="value"] برای انتخاب عناصری استفاده می شود که مقدار صفت مشخص شده در آن ها با مقدار صفت انتخابگر شروع شده باشد.

      مثال زیر تمام عناصری را انتخاب می کند که صفت class آن ها با مقدار “top” شروع شده باشد.

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

      مثال : انتخابگر ^=
      خودتان امتحان کنید »

      انتخابگر [“attribute$=”value]

      انتخابگر [attribute$="value"] برای انتخاب عناصری استفاده می شود که صفت مشخص شده در آن ها با مقدار مشخص شده تمام شده باشد.

      مثال زیر تمام عناصری را انتخاب می کند که صفت class آن ها با مقدار”test” تمام شده باشد.

      نکته : در این حالت لازم نیست که مقدار صفت مشخص شده در عنصر شامل کل مقدار مشخص شده باشد.

      مثال : انتخابگر $=
      خودتان امتحان کنید »

      انتخابگر [“attribute*=”value]

      انتخابگر [attribute*="value"] برای انتخاب صفاتی استفاده می شود که صفات مشخص شده در آن ها با مقدار صفت انتخابگر شروع شده باشد.

      در مثال زیر تمام عناصری که صفت class آنها با مقدار “te” شروع شده باشد انتخاب می شوند.

      نکته : در این حالت لازم نیست که مقدار صفت مشخص شده در عنصر شامل کل مقدار مشخص شده باشد.

      مثال : انتخابگر *=
      خودتان امتحان کنید »

      style فرم ها با انتخابگرهای صف در CSS

      با استفاده از Attribute Selectors در CSS می توانیم عناصر فرم ها را بدون استفاده از class یا ID طراحی کنیم.

      مثال : استایل فرم ها با انتخابگرها
      خودتان امتحان کنید »

      کلام آخر

      انتخابگرهای صفت در CSS یکی از روش های رایج دسترسی به عناصر HTML و تعریف Style برای آنها بدون استفاده از class یا ID است، با استفاده از Attribute Selectors در CSS دسترسی به عناصر سریع تر و حجم کدهای html نیز کاهش می یابد.

      QR:  جلسه ۳۳ : انتخابگرهای صفت در CSS
      به اشتراک بگذارید