bundles
  آیا می دانید دوره های آموزشی سون لرن از جامع ترین و کاربردی ترین آموزش های موجود در سطح وب فارسی است!

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

2 273 ۱۰ دی ۹۵

در این مطلب با ادامه نکاتی کاربردی در مورد 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

:: مطالب جدید سون لرن را از طریق ایمیل دریافت کنید :

دیدگاه ها 2 دیدگاه برای این مطلب ارسال شده است.

  • ‏‏
    حاجی زاده(۱۶ دی ۱۳۹۵)

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

  • ارسال دیدگاه

    ورود/عضویت سریع با اکانت فیسبوک/جیمیل شما

    :: شما می توانید با استفاده از اکانت یاهو یا جیمیل خود به صورت کاملا امن، سریع و بدون نیاز به ورود اطلاعات عضو و وارد سایت شوید. در این صورت هیچ نیازی به ورود نام کاربری و رمز عبور خود نخواهید داشت و هویت شما از طریق ایمیلتان مورد تائید قرار می گیرد .
    برای استفاده از این روش باید در اکانت گوگل(جیمیل) و یا یاهوی خود لاگین باشید .
    عضویت/ ورود سریع با :
    در حال اتصال ...

    ورود به سایت

    ورود سریع با :
    در حال اتصال ...

    جستجو در سون لرن

    عبارت :
    7LearnTelegram