ما را بیابید

نشانی
خیابان ۱۲۳
نیویورک، نیویورک ۱۰۰۰۱

ساعت کاری
شنبه تا چهارشنبه: ۹ صبح تا ۵ بعد از ظهر
پنجشنبه و جمعه: ۱۱ صبح تا ۳ بعد از ظهر

وب

سلکتور ها در CSS-بخش دوم

سلکتور ها در CSS

سلکتور ها در CSS – بخش دوم، سلکتور های صفات / Attribute selectors

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

سلکتور های صفات، نوع خاصی از سلکتور ها هستند که عناصر را بر اساس صفت ها و مقادیر صفت های آن ها مطابقت می دهند. دستور العمل عمومی آن ها شامل براکت ها ([]) است که یک نام صفت و سپس یک شرایط اختیاری برای مطابقت با مقدار صفت را در بر می گیرد. سلکتور های صفت ها را می توان بر اساس روش مطابقت با مقادیر صفت ها به دو دسته تقسیم کرد: سلکتور های صفات Presence and value و سلکتور های صفات Substring value.

سلکتور های صفات Presence and value

این سلکتور های صفات، برای مطابقت یک مقدار دقیق صفت استفاده می شوند:

  • [attr]: این سلکتور تمام عناصر با attr صفت را، با هر مقداری انتخاب می کند.
  • [attr=val]: این سلکتور تمام عناصر با attr صفت را انتخاب می کند، تنها اگر مقدار آن val باشد.
  • [attr~=val]: این سلکتور تمام عناصر با attr صفت را انتخاب می کند، تنها اگر val یکی از موارد موجود در لیست کلمات مقدار attr باشد که با فاصله از هم جدا شده اند.

بیایید نگاهی به نمونه های زیر داشته باشیم:

آموزش پیشنهادی برای شما : آموزش کامل CSS و CSS3



و یک style sheet ساده:

نتیجه به صورت زیر است:

سلکتور ها در CSS

توجه: صفت های data-* که در این مثال دیده می شود، صفت های داده / data attributes نامیده می شوند. که راهی را برای ذخیره داده های سفارشی در یک صفت HTML فراهم می کنند، و پس از آن می توانند به راحتی استخراج و استفاده شوند.

سلکتور های صفت مقدار Substring

سلکتور های صفت ها در این کلاس همچنین به عنوان “سلکتور های RegExp-like” نیز شناخته می شوند، زیرا یک انطباق انعطاف پذیر را به شیوه ای مشابه با عبارات منظم / regular expression ارائه می دهند (اما این سلکتور ها regular expression واقعی نیستند):

  • [attr^=val]: این سلکتور تمام عناصر با attr صفت را که با مقدار val آغاز می شود انتخاب می کند.
  • [attr$=val]: این سلکتور تمام عناصر با attr صفت را که با مقدار val تمام می شود انتخاب می کند.
  • [attr*=val]: این سلکتور تمام عناصر با attr صفت را که حاوی مقدار substring val است انتخاب می کند. (زیر رشته / substring بخشی از یک رشته است، مثلا”cat” یک زیر رشته در رشته ی “caterpillar” است.)

توجه: یک نسخه ی جایگزین بسیار خاص از گزینه ی اول وجود دارد: [attr | = val]. این انتخاب گر تمام عناصر با attr صفت را انتخاب می کنند به طوری که مقدار آن دقیقا برابر با val باشد و یا با val شروع شود. خط تیره در اینجا یک اشتباه نیست. و به طور خاص برای مطابقت با کدهای زبان اجرا شده است، برای مثال lang = “en” یا lang = “en-US”، و شما احتمالا اغلب از آن استفاده نمی کنید.

بیایید مثال قبلی مان را ادامه دهیم و دستور های CSS زیر را اضافه کنیم:

با این دستور های جدید، این نتیجه را دریافت خواهیم کرد:

سلکتور ها در CSS

یادگیری فعال: نتایج یک استایل فوتبال

در این یادگیری فعال، هدف، اضافه کردن صفت های سلکتور ها به برخی از دستور ها به منظور استایل یک لیست برای نتایج ساده فوتبال به دست بیاورید. در این جا سه ​​کار را باید انجام دهید:

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

  • دستور های ۴-۶ یک رنگ پس زمینه را به اقلام لیست اضافه می کند تا نشان دهد که آیا تیم در لیگ بالا رفته است با نه: (green, rgba(0,255,0,0.7))، و برای پایین رفتن در لیست: (red, rgba(255,0,0,0.5)), و یا در همان مکان باقی می ماند: (blue, rgba(0,0,255,0.5).). انتخاب گر صفت مناسب را برای مطابقت رنگ های صحیح با تیم های صحیح، و با رشته های inc، same و dec انتخاب کنید که در مقادیر صفت data-perf ظاهر می شود.
  • دستور های ۷-۸ تیم ها را اگر ارتقا یابند bold می کند و اگر تیم ها در معرض سقوط باشند آن ها را italic و خاکستری می کند. سلکتور صفت مناسب را برای مطابقت سبک ها با تیم های صحیح انتخاب کنید، که با رشته های pro و rel که در مقادیر صفت data-perf نمایش داده می شود.

اگر اشتباهی کردید، همیشه می توانید آن را با استفاده از دکمه ی باز نشانی / Reset مجدد تنظیم کنید. اگر واقعا موفق یه انجام این تمرین نشدید، دکمه ی نمایش راه حل را بزنید تا پاسخ را ببینید.

در ادامه ی مقاله ی سلکتور ها در CSS

در بخش بعدی این مقاله، به شبه کلاس ها و شبه عناصر / Pseudo-classes and pseudo-elements خواهیم پرداخت.

آموزش تک
نویسندهآموزش تک

دیدگاهتان را بنویسید