سلکتور ها در 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
|
1 2 3 4 5 6 7 8 9 10 11 |
Ingredients for my recipe: <i lang="fr-FR">Poulet basquaise</i> <ul> <li data-quantity="1kg" data-vegetable>Tomatoes</li> <li data-quantity="3" data-vegetable>Onions</li> <li data-quantity="3" data-vegetable>Garlic</li> <li data-quantity="700g" data-vegetable="not spicy like chili">Red pepper</li> <li data-quantity="2kg" data-meat>Chicken</li> <li data-quantity="optional 150g" data-meat>Bacon bits</li> <li data-quantity="optional 10ml" data-vegetable="liquid">Olive oil</li> <li data-quantity="25cl" data-vegetable="liquid">White wine</li> </ul> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/* All elements with the attribute "data-vegetable" are given green text */ [data-vegetable] { color: green; } /* All elements with the attribute "data-vegetable" with the exact value "liquid" are given a golden background color */ [data-vegetable="liquid"] { background-color: goldenrod; } /* All elements with the attribute "data-vegetable", containing the value "spicy", even among others, are given a red text color */ [data-vegetable~="spicy"] { color: red; } |
توجه: صفت های 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 زیر را اضافه کنیم:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
/* Classic usage for language selection */ [lang|="fr"] { font-weight: bold; } /* All elements with the attribute "data-quantity", for which the value starts with "optional" */ [data-quantity^="optional"] { opacity: 0.5; } /* All elements with the attribute "data-quantity", for which the value ends with "kg" */ [data-quantity$="kg"] { font-weight: bold; } /* All elements with the attribute "data-vegetable" containing the substring "not spicy" are turned back to green */ [data-vegetable*="not spicy"] { color: green; } |
با این دستور های جدید، این نتیجه را دریافت خواهیم کرد:
یادگیری فعال: نتایج یک استایل فوتبال
در این یادگیری فعال، هدف، اضافه کردن صفت های سلکتور ها به برخی از دستور ها به منظور استایل یک لیست برای نتایج ساده فوتبال به دست بیاورید. در این جا سه کار را باید انجام دهید:
سه دستور اول، آیکن پرچم انگلستان، آلمان و اسپانیا را به ترتیب به سمت چپ آیتم های لیست اضافه می کند. شما باید سلکتور های صفت مناسب را به کار ببرید به طوری که به تیم ها پرچم های کشور خودشان داده شود که به همراه زبان هماهنگ شده اند.
- دستور های ۴-۶ یک رنگ پس زمینه را به اقلام لیست اضافه می کند تا نشان دهد که آیا تیم در لیگ بالا رفته است با نه: (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 خواهیم پرداخت.
