illustrator Curse
  • 7Learn Android Course
  • 7Learn SEO Course
  • 7Learn WP Theme Course

    حرفه ای ترین دوره آموزش طراحی قالب وردپرس



  آیا می دانید با دوره های آموزشی سون لرن می توانید از 0 تا 100 طراحی وب را در منزل فراگیرید!

ترفندهای حرفه ای CSS ProTips (جلسه 4) : nth-child منفی و لینکهای بدون متن

2 222 ۷ آذر ۹۵

در این مطلب با ادامه ترفندهای حرفه ای CSS ProTips در خدمتتون هستیم.css protips

انتخاب آیتمها با استفاده از nth-child منفی

همونطور که میدونین با استفاده از قدرت nth-child میتونین المنتهای مورد نظرتون رو انتخاب کرده و استایل مورد نظرتون رو بهشون بدید. مثلا اگر بخاید آیتمهای فرد انتخاب بشن، باید 2n+1 قرار بدین و اگر بخواید آیتمهای زوج انتخاب بشن، باید 2n رو قرار بدین. کد HTML زیر رو در نظر بگیرید:

حالا اگر بخایم همه المنتها رو مخفی کنیم و فقط المنتهای فرد رو نمایش بدیم، بصورت زیر عمل میکنیم:

خروجی در مرورگر بصورت زیر هست:

میبینید که li هایی که فرد بودن نمایش داده شدن. حالا با استفاده از nth-child و قرار دادن مقدار منفی درون اون میتونین المنتها رو بصورت حرفه ای انتخاب کنید. فرض کنید که فقط میخاید المنتهای 1 تا 4 رو نمایش بدین. برای اینکار به چه صورت عمل میکنید؟

روشی که در اینجا از اون استفاده میکنیم قرار دادن -n+4 درون nth-child هست. با اینکار المنتهای 1 و 2 و 3 و 4 انتخاب میشن و استایل مورد نظر براشون نمایش داده میشن. کد CSS بصورت زیر میشه:

خروجی در مرورگر هم بصورت زیر خواهد شد:

بهمین راحتی 4 li اول رو نمایش دادیم. مثلا اگر بخایم بجای 4 تای اول، 2 تای اول رو نمایش بدین، بجای -n+4، عبارت -n+2 رو قرار میدیم. بهمین راحتی. در اینجا هم میتونین دموی اون رو مشاهده کنید.

استایل مناسب برای لینکهای بدون متن

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

کد CSS زیر رو براش قرار میدیم:

خروجی بصورت زیر خواهد شد:css links

این لینک یه لینک عادی بود و متن و آدرس داشت. حالا اگر لینک ما متن نداشته باشه، هیچی در خروجی نمایش داده نمیشه. لینک زیر رو در نظر بگیرید:

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

خروجی در مرورگر بصورت زیر خواهد شد:css links 2

همونطور که دیدید گفتیم که اون a هایی که href رو دارن و خالی هستن و متنی درونشون قرار نداره رو انتخاب کن و برای کلاس کاذب before اونا یک content قرار بده. چیزی که درون content قرار میگیره همون متن ویژگی href هست که با استفاده از attr دریافت شده. بهمین راحتی. در اینجا هم میتونین دموی اون رو مشاهده کنید.

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

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

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

یا علی

Source

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

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

  • ‏‏
    Mehdi Soli(۹ آذر ۱۳۹۵)

    سلام، خیلی خیلی عالی بود. واقعا کاربردی بود. ممنون از مقاله بسیار خوب و زیبای شما

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

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

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

    ورود به سایت

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

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

    عبارت :
    7LearnTelegram