نکاتی کاربردی در مورد CSS (جلسه 14) : انتخاب بازه ای از المنتها با CSS

- visibility ٢ mode_comment

در این مطلب با ادامه نکاتی کاربردی در مورد CSS در خدمتتون هستیم. css-style

شما میتونین رنجی از المنتها رو انتخاب کنید

این دمو رو مشاهده کنید تا ببینید چطور میشه رنجی از المنتها رو انتخاب کرد. همونطور که دیدید درون این دمو تعدادی li قرار داده شده و پس زمینه المنتهای 8 تا 15 با بقیه فرق میکنه. بنظر شما چطور میشه المنتهای 8 تا 15 رو با استفاده از CSS انتخاب و Select کرد؟

فرض کنید ما یک لیست داریم که درون اون 20 li قرار گرفته. حالا برای اینکه با استفاده از یک Selector، المنتهای 7 تا 15 رو انتخاب کنیم و به اونا استایل بدیم، بنظرتون چکار باید کرد؟ کدهای زیر رو در نظر بگیرید:

کد بالا باعث میشه که li ها 7 تا آخر انتخاب بشن.

این کد هم باعث میشه که از li اول تا 14 انتخاب بشه و پس زمینه براشون تغییر بکنه. حالا میتونیم از این دو انتخابگر و کلاس کاذب همزمان استفاده کنیم و قابلیت جدیدی رو به وجود بیاریم. برای اینکار اونا رو بصورت زنجیری و پشت سر هم استفاده میکنیم. بصورت زیر:

میبینید که دو کلاس کاذب رو پشت سر هم قرار دادیم و با اینکار اشتراک اونا حساب میشه و استایل بهشون اعمال میشه. اشتراک این دو کلاس کاذب، li های 7 تا 14 میشن و استایل مورد نظر بهشون اعمال میشه. نمونه زیر رو برای درک بهتر مشاهده کنید: مرورگر Safari در این مورد باگ داره و اون رو بخوبی و درستی اجرا نمیکنه. راه حل ساده ای که برای اون وجود داره و پیشنهاد شده، اینه که بیام و به سادگی ترتیب قراردهی کلاسهای کاذب رو برعکس کنیم. بصورت زیر:

دیدید که به سادگی جای اونا رو عوض کردیم و حالا اگر اونو دوباره درون Safari باز کنیم، میبینیم که به درستی کار میکنه. شاید استفاده از این کلاسهای کاذب در ابتدا براتون گیج کننده باشه ولی به مرور زمان بهشون عادت خواهید کرد.

برای مطالعه بیشتر در این زمینه میتونین این لینک رو مطالعه کنید. پس دیدید که به راحتی میتونیم بازه ای از المنتهای مورد نظرمون رو به سادگی انتخاب کنیم و به اونا استایل مورد نظرمون رو اعمال کنیم.

در جلسات بعدی با ادامه نکات در خدمتتون هستیم.

امیدوارم از این جلسه خوشتون اومده باشه.

موفق و پیروز باشید.

یا علی

Source

comment دیدگاه کاربران
حاجی زاده

مرسی داری آقای اسفندیاری.

موفق باشید

نیاز به لاگین

برای ارسال دیدگاه و یا پرسیدن سوال خود در این قسمت، باید در سایت لاگین شوید.